1. 程式人生 > >一天搞定CSS: 浮動(float)的副作用--12

一天搞定CSS: 浮動(float)的副作用--12

我們通常使用浮動來實現某些元素的佈局,但是往往這些元素浮動會影響其他元素的佈局,因此會產生副作用。

浮動帶來的副作用

1. 塊狀元素,會鑽進浮動元素的下面,被浮動元素所覆蓋,像這樣

這裡寫圖片描述

2. 行內元素,例如文字, 則會環繞在浮動元素的周圍,為浮動元素留出空間,像這樣:

這裡寫圖片描述

3. 浮動元素的父元素坍縮, 像這樣:

這裡寫圖片描述

如果我們不希望要這些效果,就需要清除浮動來解決後患,使後面的元素表現的跟浮動前一樣,這樣我們既實現了黃色元素浮動,又實現了後來的元素不會受其影響產生不必要的麻煩。

清除浮動的方法,見下一節內容