CSS中清除浮动

一、浮动的负做用

1.一、父元素内容区不能被撑开

若是一个父元素里面的子元素都是浮动的话，父元素的内容区将不能被子元素撑开

<div class="div1 clearfloat">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>

.div1 {
  background: #000080;
  border: 1px solid red;
}
.left {
  float: left;
  width: 20%;
}
.right {
  float: right;
  width: 30%;
}

如图，div1 的内容区将为0

 

1.二、脱离文档流

使用浮动的元素将会脱离文档流，后面的元素将会跑到浮动元素的下面，不过文本内容不会被遮挡

 

二、清除浮动

2.一、在浮动元素后面定义一个空元素

给浮动元素后面添加一个空元素，该元素样式为 clear: both ，便可清除浮动

<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div style="clear:both"></div>
</div>

 

2.二、给浮动元素的父元素添加伪元素

给浮动元素的父元素添加伪元素，给该伪元素添加清除浮动的样式便可清除浮动。

<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>

.div1:after {
  content: "";
  clear: both;
  display: block;
}

父元素的伪元素必须设置 display 为 block 才行。

注意：伪元素必须设置在浮动元素的父元素上才行，设置在浮动元素上没有效果。好比下面：

<div class="floatDom"></div>
<div class="content">这里是内容</div>

.floatDom {
  width:100px;
  height:100px;
  background:#d9bcbc;
  float: left;
}
.floatDom::after {
  clear: both;
  display: block;
  content: "";
}
.content {
  height:150px;
  background:#8585c0;
}

设置在浮动元素上没有效果，并无清除浮动，下面的元素仍然会跑上去。

 

2.三、父元素定义overflow:hidden

<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>

.div1 {
  overflow: hidden;
}

浮动元素的父元素只要定义overflow: hidden 便可清除浮动

 为何父元素设置 overflow 属性便可清除浮动？

缘由：根据 BFC 布局规则，计算 BFC 高度时，浮动元素也参与计算。BFC 详情参考：https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html