當元素浮動時,他就不再占用文件流中的任何空間了,因此,父列表實際上什麼東西都沒有,他就會收縮,從而隱藏列表的背景,解決這個問題的方法有以下集幾種:
方法一:新增乙個清理的元素,但是會在頁面上新增不必要的元素,所以不建議使用這種辦法;
方法二:讓父元素浮動,並且使用某個元素(比如站點頁尾)對它進行清理,以便換行;
方法三:也就是我們使用最多的方法,採用 overflow:hidden;技術;
方法四:利用相鄰元素進行清除浮動;
方法五:使用::after偽元素,content:」 「空元素進行清除浮動;
下面讓我們通過示例**來看看:
法一:
方法二:lang="en">
charset="utf-8">
浮動與清除title>
type="text/css">
.news
.news
img .news
p .clear
/*方法一*/
style>
head>
class="news">
some textp>
class="clear"> /*方法一*/
div>
body>
html>
方法三:lang="en">
charset="utf-8">
浮動與清除title>
type="text/css">
.news
.news
img .news
p
style>
head>
class="news">
some textp>
class="clear"
style="clear:both;"> /*方法二*/
div>
body>
html>
效果如下:lang="en">
charset="utf-8">
浮動與清除title>
type="text/css">
.news
.news
img .news
p
style>
head>
class="news">
some textp>
div>
body>
html>
方法四:
方法五:lang="en">
charset="utf-8">
使用相鄰元素進行清除浮動title>
清除浮動是乙個時常會遇到的問題,不少人的解決辦法是新增乙個空的 div 應用 clear:both; 屬性。現在,無需增加沒有意義的元素,僅需要以下樣式即可在元素尾部自動清除浮動:
lang="en">
charset="utf-8">
使用::after偽元素清除浮動title>
前端CSS怎麼清除浮動?
前端怎麼清除浮動?方法一 使用帶clear屬性的空元素 在浮動元素後使用乙個空元素如 並在css中賦予.clear屬性即可清理浮動。亦可使用 或來進行清理。方法二 使用css的overflow屬性 給浮動元素的容器新增overflow hidden 或overflow auto 可以清除浮動,另外在...
web 前端歷程(2)浮動與清除浮動
web 前端歷程 2 浮動與清除浮動 簡單的來看,這裡的 layout div是無法顯示出背景黃色屬性的 原因 子元素left和right是直接浮動的,這時脫離了普通的文件流,進而無法直接的撐起父級元素的高度 即認為父級元素塌陷!所以要撐起來呀 type text css body layout l...
前端學習筆記 CSS 清除浮動
我們前面說過,浮動本質是用來做一些文字混排效果的,但是被我們拿來做布局用,則會有很多的問題出現,但是,你不能說浮動不好 由於浮動元素不再占用原文件流的位置,所以它會對後面的元素排版產生影響,為了解決這些問題,此時就需要在該元素中清除浮動。準確地說,並不是清除浮動,而是清除浮動後造成的影響 如果浮動一...