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