CSS浮動和清除浮動

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>專為除錯用
title
>
head
>
<
style
>
/*基礎樣式
*/div
.box1
.box2
.box3
.box4
/*改變三個盒子的浮動和清除浮動屬性，看下不同效果
*/.box2
.box3
.box4
style
>
<
body
>
<
div 
class
="box1"
>
div>
<
div 
class
="box2"
>
div>
<
div 
class
="box3"
>
div>
<
div 
class
="box4"
>
div>
body
>
html
>

下面是概念性的東西，假設有a和b兩個元素，b為a的前乙個兄弟元素，他們的父級元素為c：

1、a-float  b-block，則另起一行浮動；

2、a-float  b-inline-block，並且該兄弟元素加上該浮動元素寬度小與c，那麼他們會同行顯示，左浮動的話甚至會在兄弟元素之前顯示。

3、a-float  b-float，那麼b會緊接著a元素【為float:right的時候b在a左側】

4、a-block 不管a前面有幾個浮動元素，a都會懟到最近的乙個顯示為block或者inline-block元素的下面

說完了浮動，下面說說，清除浮動：

1、對a元素設定clear: left 屬性，表示的是當b浮動與a元素左側，則會將a元素下移。好像b元素沒有浮動效果一樣，以下展示了一段清除浮動的**：

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>專為除錯用
title
>
head
>
<
style
>
/*基礎樣式
*/body
/*浮動布局的時候父級元素一定要給寬度，不然縮放瀏覽器的時候浮動效果會亂
*/div
.box1
.box2
.box3
.box4
/*改變三個盒子的浮動和清除浮動屬性，看下不同效果
*/.box2
.box3
.box4
/*清除box4右側浮動
*/style
>
<
body
>
<
div 
class
="box1"
>
div>
<
div 
class
="box2"
>
div>
<
div 
class
="box3"
>
div>
<
div 
class
="box4"
>
div>
body
>
html
>

第二次編輯於2016/07/06

上面說了清除浮動的效果，而清除浮動的實際用途，並沒有說明，下面說乙個清除浮動常見的用途：

.clearfix:after

也就是給乙個元素增加乙個這樣的類，效果是，在該元素內的末尾新增乙個偽元素，並且，這個偽元素自帶清除左右浮動的光環，而他本身是乙個沒有長度和寬度的塊級元素，

是不是很bug，不知道這種方法是誰想出來的，真是太機智了。

好了，上面說到新增了乙個這樣的塊元素，那麼效果是怎麼樣的呢，請聽我慢慢道來。如下面**所示，父級元素.box1裡面有兩個浮動元素.box2和.box3，由浮動和塊級元素的特性可知，此時的.box1只有乙個全屏的寬度，並不會有高度（浮動起來的元素撐不起來父級的高度）。現在我們將clearfix這個類新增到.box1元素中，按照面的分析，此時.box1元素內除了兩個浮動的元素，還有乙個偽元素after，假如after沒有clear:both屬性，那麼這個元素是會和浮動元素在同一行的（這個我們在最開始的浮動元素特性的時候就說了）。但是這個偽元素剛好是有清除浮動屬性的，此時的after偽元素就不會和浮動元素在同一行了，於此同時，父級元素.box1的高度也被拉起來了，並且是和浮動元素中高度最大的那個元素一樣，因為after是沒有高度的！！

說了那麼多，其實最終效果可以用一句話總結，給父級元素新增clearfix，可以使父級元素的高度，動態的和內部的浮動元素保持一致，（剛好包含內部所有浮動元素）。

以後見到這種用法，但是使用環境不一樣的話，要舉一反三，慢慢分析就好。

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>為什麼要清除浮動
title
>
head
>
<
style
>
.box2
.box3
.clearfix:after 
style
>
<
body 
>
<
div 
class
="box1 "
>
<
div 
class
="box2"
>box2
div>
<
div 
class
="box3"
>box3
div>
div>
body
>
html
>

css浮動和清除浮動

css樣式的float浮動屬性，用於設定標籤物件 如 標籤盒子 標籤 標籤 標籤等html標籤 的浮動布局，浮動也就是我們所說標籤物件浮動居左靠左 float left 和浮動居右靠右 float right 一般情況是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣cs...

CSS浮動和清除浮動

包裹性指的是元素尺寸剛好容納內容,表現得就像diaplay inline block一樣 具有包裹性的其他屬性 display inline block position absolute fixed sticky overflow hidden scroll會使父元素高度塌陷 為了實現文字環繞效果...

CSS浮動和清除浮動

一 浮動 float left，元素脫離文件流，向左移動，直到碰到包含框或者另乙個浮動元素的左側 或float right，元素脫離文件流，向右移動，直到碰到包含框或者另乙個浮動元素的右側 二 清除浮動 clear left right both 正確的解釋應該是 對於元素a設定屬性clear le...