清除浮动的方法总结

1，浮动的元素不能给标准流的父亲撑出高度，怎么办？

标准流的元素只能被标准流的儿子撑出高度

2，偏方overflow，解决该问题的方法一

overflow:hidden|auto|sreoll;

overflow本身是管理溢出内容的

但是这个属性不但能管理溢出，还能让父元素被浮动的子元素撑出高度，也就是说父元素设置了这个属性，就能被浮动的儿子撑出高度

3，如果父元素设置了高度，能够管住浮动的儿子

有高度的盒子能够管住浮动的儿子不去影响其他的盒子，也不会被其他盒子影响

4，清除浮动方法

clear:both;

clear:both|left|right;

清除全部浮动|清除左浮动|清除右浮动

margin设置：浮动元素设置margin就去找浮动元素，标准流设置margin去找标准流

这个东西不好用，尽可能不用：

1）父盒子依旧没有高度

2）margin基本算是废了（失效状态）

5，清除浮动方法2：隔墙法

很有用，经常用在页面大块与大块之间，小块之间还是有一定问题

隔墙法：使得被隔离的两个部分互不影响，但是两个部分依旧没有高度，margin依旧处于失效状态，但是我们可以使用墙来模拟margin

6，清除浮动方法3：内墙法

这种情况，margin好使了，高度也有了，浮动互不影响，所有的问题都能解决

但是内墙法使用的html标签太多，并且这些标签没有语义，看起来不爽，所以内墙法使用的也不多

7，清除浮动方法4：伪元素法

其实和内墙法一样，但是没有标签，使用伪元素替代标签

8，清除浮动方法5：overflow:hidden;

溢出隐藏

---

总结：

清除浮动的方法很多，但是很多都只存在于传说与面试当中

工作过程中：

1）我们喜欢清除浮动使用overflow:hidden;

2）在页面布局时大块之间我们也会使用外墙法

---

感觉有帮助的点个喜欢