CSS新手入门笔记整理：CSS清除浮动的方法

太空背包客2023-12-13 17:03

浮动可以让我们灵活地布局，但是也会带来一定的副作用。父元素高度塌陷，从而导致边框不能撑开，背景色无法显示。页面布局错乱。
清除浮动，其实就是清除元素被定义浮动之后带来的脱离文档流的影响。浮动可以使元素移到左边或者右边，然后后面的文字或元素会环绕着这个浮动元素。如果不想浮动元素后面的元素环绕着它，希望后面的元素回归到正常文档流中去，这个时候我们可以清除浮动。

clear:both

语法

复制代码

元素{clear:both；}

|---------|-------------|
| 属性值 | 说明 |
| left | 清除左浮动 |
| right | 清除右浮动 |
| both | 同时清除左浮动和右浮动 |

clear 属性不是应用于浮动元素本身，而是应用于浮动元素后面的元素。

使用 clear:both 来清除浮动，往往会多添加一个 div 标签。这个 div 标签仅仅是为了清除浮动而添加的，没有任何其他意义。但它会增加多余的标签，还会破坏 HTML 代码的语义。

语法

复制代码

父元素{overflow:hidden；}
子元素{float:left;}

overflow:hidden 应用于浮动元素的父元素，而不是当前的浮动元素。

但它会隐藏超出父元素的内容部分，有时候这并不是我们预期的效果。

::after 伪元素结合 clear:both 来清除浮动。

语法

复制代码

.clearfix{*zoom:1;}
.clearfix::after
{
 clear:both;
 content:"";
 display:block;
 height:0;
 visibility:hidden;
}

定义成一个公共的 class，这个 class 一般取名为".clearfix"然后对这个类进行全局引用，这样可以减少重复的 CSS 代码。（*zoom:1; 用于解决 IE6、IE7 的浮动问题。）

使用 clear:both 清除浮动会增加多余的标签，使用 overflow:hidden 清除浮动会使超出父元素的部分被隐藏。使用 ::after 伪元素来清除浮动，则不会有这些缺点。在实际开发中，更倾向::after 伪元素于使用方法。