CSS梳理之流的破壞float與BFC

時間 2019-11-16

標籤 css 梳理之流破壞 float bfc 欄目 CSS 简体版

原文原文鏈接

「流」，文檔流，是CSS中最基本的定位和佈局機制。css

瀏覽器中的元素默認的從左到右（內聯元素），從上到下（塊級元素）如同流水通常堆砌的佈局方式。html

1、float屬性

float屬性的特性以下:web

被設置了float屬性的元素呈現包裹性，即其自身的width不是默認撐滿父元素，而是和height屬性同樣由子元素決定。
被設置了float的元素會塊狀化並格式化上下文，簡單來講就是display的值變爲block，並生成了一個BFC
由於生成了BFC，全部設置了float的元素垂直方向不會產生margin合併
脫離文檔流，外在表現爲高度塌陷，後面元素和其重疊。

前三個屬性都是十分優秀的特性，可是第四個屬性有些時候就會產生很大的問題，所以咱們在使用float的時候要考慮清除這種高度塌陷，以下圖所示。瀏覽器

CSS部分代碼：bash

.wreap{
  border: 1px solid #000000;
}
.size{
  width: 100px;
  height: 100px;
  background-color: red;
  float: left;
}
.box{
  margin: 10px;
}
.box1 {
  background-color: blue;
}
.clear{
  clear: both;
}複製代碼

HTML部分代碼：佈局

<body> <div class="wreap"> <div class="box size"></div> <div class="box size box1"></div> </div> </body>複製代碼

浮動的清除

（1）clear：both清除浮動元素的浮動spa

代碼在上述的基礎上，就在具備box1樣式的div下面增長了一個具備clear：both屬性的divcode

<body> <div class="wreap"> <div class="box size"></div> <div class="box size box1"></div> <div class="clear"></div> </div> </body>複製代碼

固然直接使用僞元素:alter能更優雅的實現清除浮動大體代碼以下：orm

.wreap{
  border: 1px solid #000000;
}
.size{
  width: 100px;
  height: 100px;
  background-color: red;
  float: left;
}
.box{
  margin: 10px;
}
.box1 {
  background-color: blue;
}
.clear:after{
  content: "";
  display: block;
  clear: both;
}複製代碼

<body>
  <div class="wreap clear">
      <div class="box size"></div>
      <div class="box size box1"></div>
  </div>
</body>複製代碼

能夠吧clear:alter這一條寫到全局樣式，哪裏須要清除浮動，直接在對應的位置加上clear便可。cdn

（2）經過構建BFC清除浮動

BFC的特性一下子會詳細介紹，其中之一就是BFC會包含浮動的塊，即其會被浮動的元素撐開。

因此將浮動元素的父元素變爲BFC也能夠解決浮動。

2、BFC

1.BFC是什麼

BFC(Block Formatting Context) 格式化上下文，是web中盒模型的一種佈局和css渲染模式，簡單的來講，就是構成了BFC的元素就如同上了個buff結界，其會變成了一個獨立和外界隔絕的容器，不管內部如何折騰，都不會影響到外界，一樣外界也影響不到他。

2.如何造成BFC

浮動元素會造成BFC，即全部float值部位none的元素
定位元素，position爲absolute和fixed的元素
dispaly爲inline-block，table-cell，table-caption的值（講老實話，除了inline-block意外，另外兩個比較少用）
overflow 除了 visible 之外的值（hidden，auto，scroll），其中hidden經常使用於浮動的清除。

3.BFC的特性

BFC內部的子元素會自左到右邊（行內元素），自上而下（塊級元素）排列，常規排列的子元素左外邊距應該和包含塊的左邊緣接觸，能夠看做BFC內部有一個常規文檔流。
由於內部能夠看做有常規文檔流，因此子元素塊級元素見一樣會發生margin在垂直方向的合併，解決方法就是讓子元素也變成BFC
BFC呈現包裹性，自身計算寬高的時候，浮動的元素也會被計算進去，正是憑藉這一特性，BFC也能夠用來清楚浮動所帶來的高度塌陷。
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，一樣外面天打雷劈也影響不到裏面。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。