CSS清除浮动的方法及优缺点

2022-07-12 15:44:16

浮动是CSS布局里面用的比较多的属性。浮动的框向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

因为浮动会使当前元素产生向上浮的效果，所以浮动的元素会脱离正常的文档流，它包围的内容在文档流中不占空间。元素浮动会影响其他元素的布局，那么浮动会带来哪些影响呢？

　　1. 元素浮动后，父元素的背景不能显示；

　　2. 父元素边框不能被撑开，即父元素高度塌陷（因为父元素的高消失，当元素没有高度时就会有塌陷）；

　　3. margin 设置值不能正确显示；

　　4. 兄弟元素的位置受到影响；

　　　注：如果浮动元素后面是块元素，会与浮动元素重叠，但其在文档流中的相对垂直位置不会改变，因为文档流中块级元素是独占一整行的。如果浮动元素后面是行内元素，则会并排显示（若设置了元素的宽度，并且屏幕放不下时会换行显示）。

为了使元素表现的跟浮动之前一样，布局不受影响，就需要清除浮动来解决这些问题，我根据自己的经验总结了以下几种清除浮动的方法：

html代码：

<div class=”outer”>

    <div class=”left”>左浮动</div>

    <div class=”right”>右浮动</div>

</div>

方法一：给父元素 .outer 定义 height

　　　　给父元素手动定高，就解决了父元素不能自动获取高度的问题。

　　　　优点：简单，代码少，容易掌握

　　　　缺点：需要给出具体的高度值，所以只适合高度固定的布局

方法二：浮动元素同级末尾处添加空div标签

　　　　浮动元素末尾添加一个空标签，利用css clear:both 清除浮动，让父元素能自动获取高度

　　　　优点：简单，浏览器支持好，不容易出问题

　　　　缺点：代码不够优雅，如果页面浮动布局多，要增加很多无语义的空标签，易造成结构的混乱，后期不易维护

方法三：父级定义伪元素 :after 和 zoom

　　　　利用伪元素:after的css clear:both 清除浮动，原理同方法二，通过伪元素在元素最后定义一个空的内容。这种方法很多大型网站都有使用，可以定义公共样式，以减少 css 代码。

　　　　优点：浏览器支持好，不容易出问题

　　　　缺点：代码多，要两句结合使用。

.outer { zoom:;} /*为了兼容IE*/

.outer:after {

    content:’.’;

    display: block;

    height:;

    clear: both;

    visibility: hidden;

}

方法四：使用双伪元素 :after :before 清除浮动

　　　　方法三的改版，bootstrap 中使用了此方法。

.outer:before,

.outer:after {

    content:’’;

    display: table;

}

.outer:after {

    clear: both;

}

.outer {

    zoom:;

}

方法五：父元素定义 overflow:hidden 或 overflow:auto

　　　　使用 overflow:hidden 时，浏览器会自动检查浮动区域的高度。在IE6中，需为父元素定义 width 或 zoom:1

　　　　优点：简单，代码少，浏览器支持好

　　　　缺点：内容宽高超出这个父元素所在的区域会被隐藏或出现滚动条

其他：1. 给父元素添加浮动

　　　　给父级也添加浮动属性也可清除内部浮动，但是这样会使其整体浮动，影响布局，需要一直浮动到 body 元素，也会产生新的浮动问题，不推荐使用

2.给父级添加 display: table;

　　　　这种方法改变了盒子模型，不建议使用　

以上，是我对浮动相关知识的见解和总结，如有不足之处，希望各位可以指正，谢谢~~

码农公寓