如何清除浮动(float)所带来的影响
清除浮動(float)
1.定義和用法
在w3c中給了浮動這樣的定義。
"float 屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素"。
如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。
注釋：假如在一行之上只有極少的空間可供浮動元素，那么這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
通俗的來講，浮動就是讓默認標準文檔流下的元素漂浮起來并水平排列。
讓圖像右浮動：img { float:right; }
值：
| left | 元素向左浮動。 |
| right | 元素向右浮動。 |
| none | 默認值。元素不浮動，并會顯示在其在文本中出現的位置。 |
| inherit | 規定應該從父元素繼承 float 屬性的值。 |
?
2.浮動所帶來的影響
1) 行內元素浮動之后可以支持寬高;
2) 文本會給浮動定位的元素讓位(可以以此制作文本繞排的效果);
3) 在父級沒有給高度的情況下,子級浮動后父級會沒有高度;
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>內容生成清除浮動</title><style type="text/css">#container{border: 1px solid #000;padding: 20px;background-color: #0000FF;}#d1,#d2,#d3{width: 100px;height: 100px;line-height: 100px;text-align: center;border: 1px solid #000;margin: 10px;float: left;}</style></head><body><div id="container"><div id="d1">1</div><div id="d2">2</div><div id="d3">3</div></div></body> </html>
如圖,一般來說父級中的內容會將其高度撐起來,但圖中并沒有;
3.清除浮動
如何清除浮動,這里介紹4種方法:
1) 在父級的最后添加一個空的div,添加clear屬性;
<body><div id="container"><div id="d1">1</div><div id="d2">2</div><div id="d3">3</div><div style="clear: both;"></div></div></body>這里不推薦使用這種方法,因為會在頁面添加無用的標簽,會使頁面布局復雜化;
?
2) 給父級設置overflow:hidden;(溢出隱藏)
會觸發bfc(block formatting context)--塊級格式化上下文;
<body><div style="overflow:hidden"><div id="d1">1</div><div id="d2">2</div><div id="d3">3</div></div> </body>同樣也不推薦使用,因為這個屬性與定位一起使用時會有副作用.
?
3)使用偽元素after(推薦使用)
.clearfix:after{content:""; /*內容為空*/height:0; /*高度為0*/line-height:0; /*行高為0*/display:block; /*塊級元素*/visibility:hidden; /*隱藏*/clear:both; /*行高為0*/ } .clearfix{zoom:1; /*兼容IE678*/ } <div class="clearfix" > <div id="d1">1</div> <div id="d2">2</div> <div id="d3">3</div> </div>?
4) 使用雙偽元素:after和before(不推薦使用,不嚴謹)
.clearfix:after ,clearfix:before{content:""; display:table; clear:both; } .clearfix{zoom:1; /*兼容IE678*/ }?
總結
以上是生活随笔為你收集整理的如何清除浮动(float)所带来的影响的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 学习记录(一)之h5_canvas
- 下一篇： h5+js视频播放器控件