學習筆記18 CSS清除浮動

2021-10-04 02:13:18 字數 483 閱讀 9422

在浮動元素末尾新增乙個空的標籤,例如

"clear: both">

優點:通俗易懂,書寫方便

缺點:新增許多無意義的標籤,結構化較差

⚠️:新新增的標籤必須為塊級元素

給父元素新增樣式

overflow

: hidden;

優點:**簡潔

缺點:無法顯示溢位的部分

after是額外標籤法的公升級版,也是給父元素新增標籤

.clear_fix: after

.clear_fix

也是給父元素新增

.clear_fix:before,

.clear_fix:after

.clear_fix:after

.clear_fix

css浮動清除筆記

1.在文件流中內容的高度可以撐起父元素的高度 2.在浮動流中浮動的元素是不可以撐起文件流父元素的高度 如果父元素也是浮動的就可以 可以看到將p元素設定浮動之後,並沒有撐起父元素div 我是文字1 我是文字1 我是文字1 我是文字2 我是文字2 我是文字2 根據浮動排列的規則和浮動不能撐起父元素的高度...

css學習筆記之浮動清除

說到浮動,不得不說一下bfc block formatting context 翻譯為 塊級格式化上下文 關於bfc的原理,我參考了此篇文章,bfc參考資料 大家有需要可以去看看。清除浮動 子層 底部 這種方法雖直接讓底部的div擠到下方,並沒有真正的清除浮動,但可以達到清除浮動的效果。清除浮動 子...

學習筆記 css中清除浮動

1.浮動使元素脫離文件流。2.浮動的元素可以設定寬高,在 css 中,任何元素都可以浮動。浮動元素會生成乙個塊級框,而不論它本身是何種元素。3.如果沒有給浮動元素指定高度,那麼它會以內容的高度為自己的高度,並且盡可能的窄。4.浮動的元素因為脫離了文件流,所以不能把父元素撐出高度。5.浮動框脫離了文件...