CSS 清除浮動的方法

2022-01-19 15:09:09 字數 2865 閱讀 3751

**如下可自行測試:

方法一:(前提條件:要知道子元素 內容的高度,然後 按需設定 父元素的高度)

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>清除浮動的 方法

title

>

<

style

type

="text/css"

>

/*不清楚浮動 效果

*//**/

.ft-parent

.ft-l

.ft-r

/*方法一:效果 (條件: 要知道子元素 內容的高度,然後 按需設定 父元素的高度)

*//*

.ft-parent

.ft-l

.ft-r

*/style

>

head

>

<

body

>

<

div

class

="ft-parent"

>

<

div

class

="ft-l"

>

div>

<

div

class

="ft-r"

>

div>

div>

body

>

html

>

方法二:(父元素 新增 overflow:hidden;)

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>清除浮動的 方法

title

>

<

style

type

="text/css"

>

/*不清楚浮動 效果

*//**/

.ft-parent

.ft-l

.ft-r

/*方法二:效果

*//*

.ft-parent

.ft-l

.ft-r

*/style

>

head

>

<

body

>

<

div

class

="ft-parent"

>

<

div

class

="ft-l"

>

div>

<

div

class

="ft-r"

>

div>

div>

body

>

html

>

方法三:(在父級「

」結束前加此div引入「class="clear"」樣式 —> .clear )

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>清除浮動的 方法

title

>

<

style

type

="text/css"

>

/*不清楚浮動 效果

*//*

.ft-parent

.ft-l

.ft-r

*//*

方法三:效果 ()

*//**/

.ft-parent

.ft-l

.ft-r

.clear

style

>

head

>

<

body

>

<

div

class

="ft-parent"

>

<

div

class

="ft-l"

>

div>

<

div

class

="ft-r"

>

div>

<

div

class

="clear"

>

div>

div>

body

>

html

>

方法截圖總結:

參考自:

css清除浮動方法

html 浮動 不想被浮動影響 css wrap float nofloat 現在雖然加了乙個空的div,但是並沒有給它清除浮動,所以目前的效果就是第三個子元素.nofloat還是收到浮動的影響。ok,現在給.clear加上清除浮動 clear ps 這種情況比較適合元素之間是垂直排列布局的,為了不...

css 清除浮動方法

1 額外標籤法 隔牆法 style clear both div 2 父級 overflow hidden style overflow hidden div 3 父級 after 偽元素 clearfix after clearfix 4 父級雙偽元素 clearfix before,clearf...

CSS清除浮動的方法

給元素設定了float屬性後脫離了文件流,不佔據位置,所以其父級無法將其包裹,需要清除浮動。段 box item style class box class item div div 效果 方法一 給父級設定高度 段 box 問題解決 缺點 擴充套件性不好,沒有解決根本問題 方法二 給父級加上flo...