CSS为什么要清除浮动？怎么清除？

最新推荐文章于 2024-07-17 09:05:07 发布

转载最新推荐文章于 2024-07-17 09:05:07 发布 · 493 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/lchsirblog/p/9582989.html

css 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了子元素浮动导致的父元素高度塌陷问题，提供了两种解决方案：一是使用伪元素:after配合clear:both清除浮动；二是利用overflow属性创建BFC（块级格式化上下文），确保浮动元素不影响父元素高度计算。

为什么？

子元素的浮动导致了父元素高度的塌陷。

怎么办？

两个方法：

方法一：脚底插入clear:both;
方法二：父元素BFC(ie8+)

方法一：

采用伪元素，这里我们使用:after。添加一个类clearfix：（推荐）
在我们需要清除浮动时，只需要给父元素追加clear类即可，既方便又符合语义化。
该方法的缺点是，IE6/IE7不识别:after伪元素，存在兼容性问题
代码：

<div class="box clearFix">
	<div class="child">11</div>
	<div class="child">22</div>
	<div class="child">33</div>
</div>
<style type="text/css">
	.box {
		width: 700px; margin: 0 auto; border: 2px solid green;
	}
	.child {
		width: 200px; height: 200px; background: red; float: left; margin: 10px;
	}
	.clearFix::after{
		content: '';
		display: table;
		clear: both;
	}
</style>

方法二：

使用overflow属性，给父元素添加overflow:hidden ||auto;

BFC/haslayout通常声明

  float:left/right
  position:absolute/fixed
  overflow:hidden/scroll(IE7+)
  display:inline-block/table-cell(IE8+)
  width/height/zoom:1/…(IE6/IE7)

BFC块级格式化上下文有以下特征：

  内部的Box会在垂直方向，从顶部开始一个接一个地放置。
  Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。
  每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  BFC的区域不会与float box叠加。
  BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
  计算BFC的高度时，浮动元素也参与计算。

不单单只有给父元素添加overflow:hidden才可以创建块级格式化上下文，下列方法都可以：

  浮动 (元素的 float不为 none）
  绝对定位元素 (元素的 position为 absolute 或 fixed)
  行内块 inline-blocks (元素的 display: inline-block)
  表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
  表格标题 (元素的 display: table-caption，HTML表格标题默认属性)
  overflow的值不为 visible的元素
  弹性盒子 flex boxes (元素的 display: flex 或 inline-flex)

采用float属性之后产生的现象：

  元素block块状花（砖头化）
  button默认的display是inline-block,加上float:left之后display变为block
  破坏性造成的紧密排列特性（去空格化）