CSS 清除浮动的几种方法-工具盒子

效果展示 {#效果展示}

清除浮动前 {#清除浮动前}

清除浮动后 {#清除浮动后}

原始代码 {#原始代码}

html 部分 {#html-部分}

|---------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 | hljs html < div class = "box1" > 盒子一 < div class = "subBox1" > 子盒子一 </ div > < div class = "subBox2" > 子盒子二 </ div > </ div > < div class = "box2" > 盒子二 </ div > ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> HTML </div> </pre></td> </tr> ` |

css 部分 {#css-部分}

|---------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | hljs css .box1 , .box2 { width : 600px ; } .box1 { background-color : purple; } .subBox1 , .subBox2 { float : left; width : 200px ; height : 200px ; } .subBox1 { background-color : pink; } .subBox2 { background-color : aqua; } .box2 { height : 200px ; background-color : skyblue; } ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> CSS </div> </pre></td> </tr> ` |

实现方法 {#实现方法}

空 div 清除 {#空-div-清除}

在浮动元素末尾（也就是 子盒子二 的后面）添加一个空的 div 标签，例如：

|-----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 | hljs html < div style = "clear:both" > </ div > ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> HTML </div> </pre></td> </tr> ` |

缺点：会添加许多无意义的标签，结构语义化较差。

父级使用 after 伪元素 {#父级使用-after-伪元素}

这与上面的空 div 清除的方法是等效的，结构语义化较好。

|-------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 | hljs css .box1 ::after { content : "" ; clear : both; display : block; } ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> CSS </div> </pre></td> </tr> ` |

父级添加 overflow 属性 {#父级添加-overflow-属性}

可以给浮动元素的父级（也就是 .box1 ）添加 overflow 属性设置为除 visible 外的其他值来触发 BFC 。

|-------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 | hljs css .box1 { overflow : hidden; /* overflow: auto; */ /* overflow: scroll; */ } ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> CSS </div> </pre></td> </tr> ` |

可能会出现莫名其妙的滚动条或裁剪阴影，这是使用 overflow 带来的一些副作用。

父级添加 display: flow-root {#父级添加-display-flow-root}

这是一个较为现代的方案，它可以无需 clearfix 小技巧 ^[1]^ 来创建 BFC，在使用上没有副作用。{#fnref:1}

|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 | hljs css .box1 { display : flow-root; } ` <div class="code-widget-light code-widget copy-btn" data-clipboard-snippet=""> <i class="iconfont icon-copy"> </i> CSS </div> </pre></td> </tr> ` |

唯一的缺点可能就是兼容性问题，因为它并不像前面的几种解决方案，均可以在所有浏览器中奏效。