css基礎 float浮動

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>float
title
>
<
style
>
body
.per
.red
style
>
head
>
<
body
>
<
div 
class
="per"
>
<
div 
class
="red"
>
div>
層疊樣式表(英文全稱：cascading style sheets)是一種用來表現html（標準通用標記語言的乙個應用）或xml（標準通用標記語言的乙個子集）等檔案樣式的計算機語言。css不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化。 [1] 
css 能夠對網頁中元素位置的排版進行畫素級精確控制，支援幾乎所有的字型字型大小樣式，擁有對網頁物件和模型樣式編輯的能力。
清除浮動的方法一：
在浮動元素後面使用乙個空元素
doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>float
title
>
<
style
>
.container
.div
.div1
.div2
.div3
.clear
style
>
head
>
<
body
>
<
div 
class
="container"
>
<
div 
class
="div div1"
>
div>
<
div 
class
="div div2"
>
div>
<
div 
class
="div div3"
>
div>
<
div 
class
="clear"
>
div>
div>
body
>
html
>
清除浮動的方法二：

給容器新增overflow:hidden;
doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>float
title
>
<
style
>
.container
.div
.div1
.div2
.div3
style
>
head
>
<
body
>
<
div 
class
="container"
>
<
div 
class
="div div1"
>
div>
<
div 
class
="div div2"
>
div>
<
div 
class
="div div3"
>
div>
div>
body
>
html
>
清除浮動的方法三：

css3的:after偽元素
doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>float
title
>
<
style
>
.container
.div
.div1
.div2
.div3
.clearfix:after
.clearfix
style
>
head
>
<
body
>
<
div 
class
="container clearfix"
>
<
div 
class
="div div1"
>
div>
<
div 
class
="div div2"
>
div>
<
div 
class
="div div3"
>
div>
div>
body
>
html
>
 
CSS清除浮動（Float）
我們換一種方法表達上面的意思，因為紅色方塊的 左側浮動 才導致藍色方塊上移至紅色方塊的尾後 在上個例子中，為了達到瀏覽器相容性，我們分別在紅色藍色方塊css 中分別加了 float left 這樣ie和ff中顯示效果一樣，如果此時我們還想放乙個寬度400畫素，高度100的綠色方塊，並讓其處於第二行，...
css清除浮動float
css清除浮動float 1.分析html 123 分析css 樣式 outer.div1.div2.div3分析問題 外層未設定高度，如果裡面元素不設定float的話，外層容器的高度會隨內層元素高度撐開，因為設定float之後內層元素脫離文件流，導致高度無法撐開 1 背景不能顯示 2 邊框不能撐開...
CSS基礎（float屬性與清除浮動）
3.8 這是css裡比較重要的屬性 浮動，這個屬性會在以後經常用到，算是乙個重點吧 語法 float left right none 特點 浮動的元素不佔位置，脫離了標準文件流 頁面中標籤的預設顯示方式就是標準流 浮動的元素可以實現元素的模式互換 同方向浮動的元素會順次排列 浮動的元素頂端對齊 預設...