⑴ css的浮動以及如何清除浮動
CSS清除浮動的3種方法，參考：http://www.apiref.com/css-zh/experience/skill.htm#no9
方法1：
#test{clear:both;}
#test為浮動元素的下一個兄弟元素
方法2：
#test{display:block;zoom:1;overflow:hidden;}
#test為浮動元素的父元素。zoom:1也可以替換為固定的width或height
方法3：
#test{zoom:1;}#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}
#test為浮動元素的父元素
⑵ 第五篇：web之前端之float的幾種清除浮動方式
清除浮動：clear:both；
父級div定義 overflow: auto
⑶ 清除浮動的3種方式 2021-03-21
愛, 有了浮動我們可以更加方便的布局.
恨, 有了浮動他也帶來了一些副作用, 特別是在IE67上(現在幾乎已經銷聲匿跡了).
為了避免前面元素的浮動給後面的元素帶不必要的影響, 我們就需要為後面的元素清除浮動.
清除浮動的方式有很多, 只要我們把浮動的原理搞明白了, 清除浮動也是非常好理解的.
正所謂萬變不離其宗
[圖片上傳失敗...(image-7fb242-1616303772213)]
很多時候為了高度的自適應性, 我們用子元素去撐起父元素的高度
但是如果子元素浮動之後, 就無法自動撐起父元素
導致, 父元素的高度為 0 , 後面的元素就會長驅直入, 進駐到浮動元素的下方.真是悲哉.
解決這個問題最簡單的辦法就是 手動給浮動元素的父輩元素添加高度 .
好使是好使, 但是不夠靈活.
[圖片上傳失敗...(image-abb696-1616303772213)]
clerar 屬性是 css 專門提供用來清除浮動的.
這個屬性主要有三個值:
該方法雖好, 但是也有一些不足之處.
因為 clear 對那些浮動的元素沒有做任何的操作, 所以浮動元素的父輩仍然沒有高度(如果你沒有手動添加的話)
[圖片上傳失敗...(image-cf1f54-1616303772213)]
前面說過 clear 的本質是在清理元素頂部添加足夠多的外邊距
所以這個時候我們再手動添加 margin-top 就失效了.
當然, 其他三個方向的 margin 還是有效的.
[圖片上傳失敗...(image-bd090-1616303772213)]
方法2清除浮動的最大問題是 div.content 不能設置 margin-top 無效.
於是就有了外牆隔離法.
[圖片上傳失敗...(image-d292db-1616303772213)]
於是就有了新的演變: 內牆元素隔離法.
把元素放在外面, 影響 HTML 結構.
於是有人乾脆把」隔離元素」放在內部.
[圖片上傳失敗...(image-e6f279-1616303772213)]
內牆法, 用著很爽.
但是對有潔癖的前端工程師來說, 也不是那麼的舒服: 要添加一個元素去專門的清除浮動, 不爽.
CSS3 的偽元素( :: )拯救了他們.
今天先了解一個偽元素 ::after .其他待後期課程詳細道來.
你只需要知道, 給一個元素添加一個 ::after 則相當於給這個元素添加了子元素, 而且這個子元素會是他的最後一個兒子.
[圖片上傳失敗...(image-9b96b5-1616303772212)]
前面我們學習過 over-flow 的使用, 他的作用是處理當子元素溢出的時候的情況的.
現在我們把它用到浮動元素的父容器, 然後你發現竟然….
[圖片上傳失敗...(image-ef2fb3-1616303772212)]
清除浮動的核心理念就是想辦法讓浮動元素的父元素有高度, 事情就解決了.
⑷ 網頁布局中，如何清除元素的浮動
清除元素浮動有多種方法，通常會使用到clear屬性。
如果是清除浮動元素對兄弟級元素的影響，則在浮動元素之後的第一個兄弟級元素上設置clear屬性即可。
如果是清除浮動元素對父級元素的影響，則有多種方法，比較常見的方式有兩種，一種是在父級元素當中添加一個空標簽，然後為空標簽設置clear: both; ；另一種方法是為父級元素添加偽元素，用偽元素清除浮動，例如：
<style>
.maindiv{
float:left;
width:200px;
height:200px;
margin-right:20px;
background:#fcf;
}
.main:after{
clear:both;
display:block;
height:0;
content:"200B";
}
.main{
*zoom:1;
}
</style>
</head>
<body>
<divclass="main">
<div>言成科技</div>
<div>合作夥伴</div>
<div>HTML5學堂（碼匠）</div>
</div>
更多清除浮動的方法，可以查看文章《如何清除元素的浮動》
⑸ web前端學習筆記（二）清除浮動的幾種方法
1.父標簽overflow:hidden
2.樣式屬性clear，屬性值一般是both，left，right。