在文件流中,父元素的高度預設是被子元素撐開的,也就是子元素多高,父元素就多高.
但是當為子元素設定浮動以後,子元素會完全脫離文件流,此時將會導致子元素無法撐起父元素的高度,導致父元素的高度塌陷.由於父元素的高度塌陷了,則父元素下的所有元素都會向上移動,這樣將會導致頁面布局混亂.
clearfix方案【原理:就是在這個父元素的最後建立乙個偽元素after。通過這個偽元素的一系列相關屬性,就達到了清除浮動的目的】
使用偽元素after在父元素尾部新增乙個元素
對這個新增的偽元素應用清除浮動的樣式
必備三大樣式:content、clear、diaplay
可選三大樣式:height、font-size、visibility(可見不可見) height: 0px;
font-size: 0px;
visibility: hidden;【可選樣式,主要為了保證呀,我們在實際開發的過程中,瀏覽器的相容性能更好一些。他們的目標只有乙個,就是要保證after偽類不在頁面上顯示出來。因為我們這個偽類,就是用來清除浮動,我們並不希望其顯示出來,影響我們頁面的布局。即我們想讓這個偽類去幹活,但又不想讓他露臉。】
display:none與visibility:hidden;的區別:
display設定為none ,不可見,整個這個元素不占用任何的物理空間,壓根像是不存在一樣。
但是如果是visibility的話,設定成不可見的時候,同樣也會占用物理空間,只是你看不見他,但是那個坑還在。
例如:
.clearfix:after
.clearfix:after
練習例子1:必備三大樣式:content、clear、diaplay
練習例子2:可選樣式也加上,保駕護航
height: 0px;
font-size: 0px;
visibility: hidden;
css浮動產生的高度坍塌以及解決高度坍塌的多種方法
1 給元素新增overflow hidden 原理 觸發bfc 弊端 overflow hidden 還有乙個作用就是超出隱藏,會隱藏掉元素內部定位的元素外部區域 具體實現 如下 12 3456 123 2 使用clear both清除浮動 原理 給元素內部浮動元素新增一同級空的標籤,給該空標籤設定...
CSS 浮動,高度塌陷和BFC,清除浮動
通過浮動,可以使乙個元素向其父元素的左側或右側移動,使用 float 屬性來設定元素的浮動 可選值 注意 未設定浮動 設定浮動 浮動的特點 浮動元素會完全脫離文件流,不再佔據文件流中的位置 設定浮動以後元素會向父元素的左側或右側移動 浮動元素預設不會從父元素中移出 浮動元素向左或向右移動時,不會超過...
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢?一般是乙個盒子裡使用了css float浮動屬性,導致父級物件盒子不能被撐開,這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內,因為對兩個黑色盒子使用了float浮動,所以兩個黑色盒子產生了浮動,導致紅色盒子不...