clear清除浮動
1、作用:
規定元素的某一側不允許存在浮動元素
2、值:
3、應用:
清除其他浮動元素對其產生的影響
1view codedoctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>清除浮動的應用
title
>
6<
style
>
7#box-a
1314
#box-b
2021
#box-c
27style
>
28head
>
29<
body
>
30<
div
id="box-a"
>box a
div>
31<
div
id="box-b"
>box b
div>
32<
div
id="box-c"
>box c
div>
33body
>
34html
>
4、原理:
設定了clear的元素將不再像前乙個浮動元素對齊，換行重新開始。
5、實際應用
解決網頁中的「塌陷」問題
什麼是塌陷:如果父元素只包含浮動元素，那麼在未設定高度的同時，則父元素高度塌縮為零。(ps:浮動元素只會影響跟它同級別的元素，由於父元素高度塌陷為0，則跟父元素同級別的且位於父元素後面的其他元素位置也會發生上移)
1view codedoctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>容器的塌陷
title
>
6<
style
>
7.wrap
1011
.main
1617
.aside
2223
.main,.aside
2627
.div1
3233
.clearfix
3839
/*:after 偽物件選擇符—在這個物件被瀏覽器渲染後新增一定的內容
*/40
.clearfix:after
47style
>
48head
>
49<
body
>
50<
div
class
="wrap clearfix"
>
51<
div
class
="main"
>main
div>
52<
aside
class
="aside"
>aside
aside
>
53div
>
54<
div
class
="div1"
>
div>
55body
>
56html
>
css clear 清除浮動
經常使用clear both進行浮動清除,也知道有兩個屬性 clear leftclear right,但是不經常使用.看了 整體概括如下 clear 用於清除浮動,清除的意思是,不與浮動的元素相鄰.left 或者 right 的意思是,清除的是 左浮動 還是 右浮動 只清除當前樣式作用的元素前邊 ...
浮動 清除浮動
在css布局中分為內聯元素 display inline 和塊狀元素 display block 塊狀元素缺省會佔據一行，可設定高度寬度以及邊距，而內斂元素不會也不能設定。常見的內斂元素有 a span input select，常見的塊狀元素有 h1 h6，p,div，ul，table。浮動元素是...
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不...