CSS 清除浮動的方法

**如下可自行測試：

方法一：（前提條件：要知道子元素 內容的高度，然後 按需設定 父元素的高度）

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
>

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...