float浮動 清浮動BFC渲染機制

float浮動，用於

橫向布局

。起初的橫向布局都用

display:inline-block

，但是這會導致兩個元素之間有空隙，而這是由**換行解析成空格的，解決元素間有空隙，空格：

font-size:0;,

但影響很大。

float浮動會破壞

line-box

，即浮動元素

脫離文件流

（當給乙個元素設定浮動了之後，它不會再占用頁面當中的「位置」了），造成的影響：

不會撐開父級的高度

。如下圖：

想要解決這個影響，就得清浮動（清除浮動所造成的影響）了。

清浮動後，如下：

清浮動的方法：

1.給浮動元素的父級加高度

拓展性不好

在不能確定父級高度的情況下不能使用

2.clear:both(用得最多的方法)

*zoom:1 用來觸發 haslayout(ie瀏覽器的bfc)

.clear.clear:after

觸發乙個元素的bfc（

block formatting contexts，即塊級格式化上下文）

相當於在這個元素裡面建立起一堵圍牆

圍牆裡面的內容和圍牆外面的內容不會產生干擾，如：

overflow: hidden;

（1）float的值不為none；

（2）overflow的值不為visible；

（3）display的值為

inline-block, table-cell, table-caption, flex, inline-flex

之一；（4）position的值不為static或則releative中的任何乙個。

BFC和清浮動問題

bfc block formatting context 塊級格式化上下文，是乙個獨立的渲染區域，讓處於 bfc 內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。在ie下,layout,可通過zoom 1觸發 浮動的元素會被父級計算高度 父級元素觸發了bfc 非浮動元素不會覆蓋浮動元素...

Python 浮動 清浮動

浮動布局 一.display總結 css inline 1.同行顯示,就相當於純文字,當一行顯示不下,如就是乙個字顯示不下,那麼顯示不下的那乙個字就會自動換行,和純文字的區別就是有標籤整體的概念,標籤與標籤間有乙個空格的隔斷 2.支援部分css樣式,不支援寬高 行高 行高會對映到父級block標籤 ...

高階布局 浮動 清浮動

文件流 normal flow bfc block fromatting context 塊級格式化上下文,它是乙個獨立的渲染區域,只有block level box參與,它規定了內部的block level box如何布局,並且與這個區域外部毫不相干.bfc規則 1.內部的box會在垂直方向,乙個...