元素浮動以後可以想做或向右移動,直到它的外邊緣碰到包含它的框或者另外乙個浮動元素的邊框為止。元素浮動以後會脫離正常的文件流,所以文件的普通流中的框就變現的好像浮動元素不存在一樣。
浮動的好處:
這是乙個浮動的demo:
charset="utf-8">
標籤,使用清除浮動title>
.parent
.fstyle>
head>
class="parent">
class="f">
div>
div>
body>
html>如圖:
-元素浮動在左側,父元素沒有被撐起來。
在解決浮動元素產生的問題中有很多方法,但是也有一些方法解決了問題以後又產生了新的問題,得不償失,我一般使用after偽元素來清楚浮動,不會產生別的問題。
1.新增額外標籤清除浮動。
div>
//新增額外標籤並且新增clear屬性
div>
div>優點:通俗易懂,容易掌握。
缺點:新增了無意義的空標籤,後期不好維護。
2.新增
標籤本身的的
clear
屬性
div>
//使用br標籤本身的clear屬性
clear="all">
div>優點:通俗易懂,容易掌握。
缺點:新增了無意義的空標籤,後期不好維護。
3.父元素設定overflow:hidden
//將父元素的overflow設定為hidden
div>
div>4.父元素設定overflow:auto
//將父元素的overflow設定為auto
div>
div>5.父元素也設定成浮動元素
//將父元素也設定成浮動元素
div>
div>6.父元素設定display:table
//將父元素設定display:table
div>
div>7.使用偽元素:after(推薦使用)
//在css中新增:after偽元素
.parent:after
class="parent">
class="f">
div>
div>優點:結構和語義正確,沒有多餘的標籤,一般不會產生新的問題。
缺點:復用方式不當會造成**量增多。
清除浮動方法及優缺點
方法1 給父級div定義 高度 如下 我是左浮動 我是右浮動 我是div2 原理 通過設定父元素overflow值設定為hidden 在ie6中還需要觸發 haslayout zoom 1 優點 簡介,不存在結構和語義化問題 缺點 無法顯示需要溢位的元素 亦不太推薦使用 方法7父元素設定 overf...
清除浮動的方法及優缺點
為什麼要清除浮動?下面的例子是浮動對元素的影響 lang en charset utf 8 type text css box1 box2 box3 style head class box1 class box2 p div class box3 div body html box2加入float...
浮動布局的優缺點,清除浮動有哪些方式?
當元素浮動以後可以向左或向右移動,直到它的外邊緣碰到包含它的框或者另外乙個浮動元素的邊框為止。元素浮動以後會脫離正常的文件流,所以文件的普通流中的框就變現的好像浮動元素不存在一樣。這樣做的優點就是在 混排的時候可以很好的使文字環繞在周圍。另外當元素浮動了起來之後,它有著塊級元素的一些性質例如可以設定...