持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情
接上篇
-
height给标准流的父元素强制添加一个合适的高度
-
解决：父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边。
-
问题：父元素的高度不是自适应的，一旦子元素高度变化，问题可能再次出现
-
-
clear属性：作用：清除标签元素自身受到的前面的浮动元素的影响
-
属性值：left（清除前面左浮动带来的影响）right（清除前面右浮动带来的影响）both（清除前面所有浮动带来的影响）
-
给标准流父元素添加clear属性，父元素不受前面浮动影响，不会再占有浮动让出的位置
-
解决：浮动元素影响后面元素标准流位置和贴边
-
问题：父元素不能高度自适应，两个父元素之间如果有margin效果不正确
-
-
隔墙法：
-
外墙法：在两个大的父盒子之间，添加一个空的
<div>标签，标签上带有clear: both属性-
解决：浮动影响后面元素标准流位置和贴边，模拟父元素间的距离
-
问题：父元素没有高度自适应
-
-
内墙法：在父元素内部，所有的浮动子元素后面添加一个空的
<div>元素，标签高度为0，添加clear属性-
解决：父元素高度自适应，浮动影响后面的元素位置和贴边
-
缺点：浮动是css样式属性带来的问题，内墙法使用HTML结构去辅助解决问题，如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成HTML结构的冗余
-
-
-
伪类：本质是使用伪类方法利用css代码书写一堵内墙
-
伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置
-
:after: 这个伪类表示选中的是某个标签内部的最后的位置 -
书写方法：前面必须加普通的选择器，后面连续书写伪类名称
-
将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名
-
解决：父元素高度自适应，浮动影响后面的元素位置和贴边
-
content属性值可以随意起一个名字，可以是任意字母
-
visibility: hidden;和display: none;的区别：前者可以隐藏内容但依旧保留位置与格式，后者将所有内容都隐藏
-
-
溢出隐藏：给内部有浮动子元素的父元素添加溢出隐藏overflow: hidden; 可以解决浮动的所有问题（属于是小偏方）
-
overflow: hidden;是在元素设置高度后，将超过高度的部分直接隐藏
-
如果元素不设置高度时，且同时设置了该属性，元素会自适应内容的宽度
-
原理分析：
-
高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏，浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载
-
浮动影响后面的元素：父元素有了高度后，可以管理内部所有的浮动元素，不会延伸到后面标签中影响贴边
-
-
-
总结：如果父元素高度是固定的，建议使用height属性解决；如果父元素高度需要自适应，建议使用overflow属性解决浮动问题
