div1 盒子裡有left和right 兩個子盒子，div1 有兄弟盒子div2，給left、right 盒子新增浮動前效果圖：
浮動的屬性雖然方便使用，但是在使用這種屬性時，也存在著一種弊端，那就是當子元素設定了float屬性之後，且父元素的高度沒有設定， 而是由子元素支撐起來，則會導致父元素的高度塌陷(原本的height後來被置為0)。所以這裡我們說的清除浮動，指的是清除子盒子新增浮動效果後造成的父盒子高度塌陷。
給left、right 盒子新增浮動後效果圖：
2、父級div 定義 overflow:hidden
3、父級div定義偽類:after和zoom(用於非ie瀏覽器)
4、父級div定義height
5、父級div定義overflow:auto
新增浮動button
>
"back"
>
返回浮動前button
>
>
p>
class
="div1"
id="parentdiv"
>
"left"
>
leftdiv
>
"right"
>
rightdiv
>
div>
class
="div2"
>
div2div
>
>
清除浮動h1
>
>
>
"clearboth"
>
clear:bothbutton
>
li>
>
"overflowhidden"
>
父級div 定義 overflow:hiddenbutton
>
li>
>
"fakeclass"
>
父級div定義偽類:after和zoom(用於非ie瀏覽器)button
>
li>
>
"addheight"
>
父級div定義heightbutton
>
li>
>
"overflowauto"
>
父級div定義overflow:autobutton
>
li>
ul>
let addfloat = document.
getelementbyid
('addfloat'
)let leftdiv = document.
getelementbyid
('left'
)let rightdiv = document.
getelementbyid
('right'
)let clearboth = document.
getelementbyid
('clearboth'
)let overflowhidden = document.
getelementbyid
('overflowhidden'
)let parentdiv = document.
getelementbyid
('parentdiv'
)let back = document.
getelementbyid
('back'
)let fakeclass = document.
getelementbyid
('fakeclass'
)let addheight = document.
getelementbyid
('addheight'
)let overflowauto = document.
getelementbyid
('overflowauto'
)addfloat.
onclick
=function()
back.
onclick
=function()
clearboth.
onclick
=function()
overflowhidden.
onclick
=function()
fakeclass.
onclick
=function()
addheight.
onclick
=function()
overflowauto.
onclick
=function()
.div1#right
.div2
.clearfloat:after
.clearfloat
浮動及清除浮動的方法
浮動元素脫離文件流，不佔據空間。浮動元素直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。1 使用空標籤清除浮動 在所有浮動標籤後面新增乙個空標籤定義cssclear both.弊端就是增加了無意義標籤,影響文件結構美觀性。1 div style clear both div 2 使用overflo...
浮動使用及清除浮動
浮動 讓元素脫離文件流，不受父盒子限制 浮動元素的寬高不會撐大父盒子 在父盒子無高度情況下 浮動元素不會遮蓋文字部分，文字會圍繞浮動元素 浮動目前功能 1.清除之間空白間隙 2.行級元素設寬高。使用場景多是寬高一致的元素整齊排列。清除浮動的方法 1.給浮動元素的父盒子加overflow hidden...
浮動理解及清除浮動
浮動是css裡布局使用最多的屬性。浮動之後，元素會脫離文件流，緊貼上乙個浮動盒子的邊。一旦我們設定了浮動，那麼該元素就能夠併排展示，而且可以設定寬和高。float right float left 浮動元素會緊貼上乙個浮動元素。若寬度不夠，會換行。頂部頂帖上乙個浮動元素的底部。浮動方向是要一直。di...