在標準流中
內容的高度可以撐起盒子的高度
在浮動流中
浮動元素內容的高
不可以撐起盒子的高
/*並設定相應的css樣式,並設定p樣式全部左浮*/
我是文字1
我是文字1
我是文字1
我是文字2
我是文字2
我是文字2
原效果:
達到效果:
給前面的父盒子新增高度
,注意:
在企業開發中能不寫高度就不寫高度, 所以這種方式
不常用在.box2中設定
clear:both;屬性清除前面浮動元素對我的影響
,注意:
使用clear:both之後margin屬性會失效, 所以
不常用。
clear
屬性值有left,right,等等。
在兩個有浮動子元素的盒子之間新增乙個額外的塊級元素
。注意:
在外牆
法中可以通過設定額外標籤的高度來實現margin效果
不常用在前面乙個盒子的最後新增乙個額外的塊級元素
,注意:
內牆法會自動撐
起盒子的高度, 所以可以直接設定margin屬性
。和內牆法一樣需要新增很多無意義的空標籤,有違結構與表現的分離,在後期維護中將是
噩夢overflow:hidden的作用是清除溢位盒子邊框外的內容
由於overflow:hidden可以撐起盒子的高度, 所以可以直接設定margin屬性
。ie8以前不支援利用overflow:hidden來清除浮動, 所以需要加上乙個*zoom:1;
實際上*zoom:1能夠觸發ie8之前ie瀏覽器的haslayout機制
。優點可以不用新增額外的標籤又可以撐起父元素的高度, 缺點和定位結合在一起使用時會有衝突
.box1
overflow:hidden三大作用:
可以將超出標籤範圍的內容裁減掉
清除浮動
可以通過這個屬性讓裡面的盒子設定margin-top後,外面的盒子不被頂下來(若想實現第三條,還闊以將外面的盒子新增乙個boder屬性來達到目的。)
給前面的盒子新增偽元素來清除浮動
。注意點:本質上和內牆法一樣, 都是在前面乙個盒子的最後新增乙個額外的塊級元素
,新增偽元素後可以撐起盒子的高度, 所以可以直接設定margin屬性
,css中還有乙個東西叫做偽類, 偽元素和偽類不是同乙個東西。
偽元素選擇器:給指定標籤的內容前面或後面新增乙個子元素。
格式:標籤名稱
::before
標籤名稱
::after
.box1
::after
在左.box1
::after後面新增如下:
.box1
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢?一般是乙個盒子裡使用了css float浮動屬性,導致父級物件盒子不能被撐開,這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內,因為對兩個黑色盒子使用了float浮動,所以兩個黑色盒子產生了浮動,導致紅色盒子不...
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢?一般是乙個盒子裡使用了css float浮動屬性,導致父級物件盒子不能被撐開,這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內,因為對兩個黑色盒子使用了float浮動,所以兩個黑色盒子產生了浮動,導致紅色盒子不...
CSS清除浮動 清除float浮動
一般浮動是什麼情況呢?一般是乙個盒子裡使用了css float浮動屬性,導致父級物件盒子不能被撐開,這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內,因為對兩個黑色盒子使用了float浮動,所以兩個黑色盒子產生了浮動,導致紅色盒子不能撐開,這樣浮動就產生了...