CSS3清除浮動 保持浮層水平垂直居中

2021-07-24 22:08:59 字數 700 閱讀 9223

1)清除浮動,什麼時候需要清除浮動,清除浮動都有哪些方法

1、在非ie瀏覽器(如firefox)下,當容器的高度為auto,且容器的內容中有浮動(float為left或right)的元素,在這種情況下,容器的高度不能自動伸長以適應內容的高度,使得內容溢位到容器外面而影響(甚至破壞)布局的現象。這個現象叫浮動溢位,為了防止這個現象的出現而進行清除浮動。

2、清除浮動的方法:

(1)使用clear:both。如果我們明確的知道緊接著浮動元素後面的元素,可以使用這種方法來清除浮動。這種方法簡單,容易使用,不需要hack,語義化也不錯。

(2)空div方法。這個方法一般是不推薦使用的,雖然沒有什麼***的,但因為這個div純粹是為了表現,沒有語義。

(3)對容器新增clearfix類會清除浮動

.clearfix:after

2)如何保持浮層水平垂直居中

a.利用flexbox布局

.parent

.children

b.利用絕對定位與transform

.parent

.parent .children

c.將父元素定位,子元素絕對定位,利用margin負值為子元素寬高的一半來實現。

.parent

.parent .children

d.利用定位與margin:auto

.parent

.children

CSS3 清除浮動

一 目的 通過本文,讓大家可以明白清除浮動的原理和幾種方法,最後得出一種本文認為最好用的方法。本文也會同步到我的個人 二 內容簡介1 引入,還原浮動本來的意義 2 說明,實際開發中常用浮動來做什麼 3 提問,為什麼要清除浮動 4 回答,如何清除浮動以及常用的幾種方法 5 結論,得出本文認為最好用的方...

css3 清除浮動

eg 三個div,父級div下面有兩個div分別float left和float right 1 style 2.container 3.fl 4.fr 5style 6 body 7 div class container 8 div class fl 向左浮動 div 9 div class f...

CSS3浮動與清除浮動

浮動的設計初衷 實現文字環繞效果。浮動的特徵 脫離標準文件流,導致父元素高度塌陷,向左或者向右浮動直到遇到其他的浮動元素。浮動產生的原因 盒子裡的子元素使用了浮動屬性,脫離了文件流,導致父元素無法被撐開。浮動造成的 父級的背景無法顯示,父級的邊框無法被撐開,以及父級與子級之間的margin和padd...