本文共 1703 字，大约阅读时间需要 5 分钟。
一、浮动
left 元素向左浮动
right 元素向右浮动
none 元素不浮动
inherit 从父级继承浮动属性
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | #fd{ width: 100px; height: 100px; background-color: red; float: left; } #sd{ width: 100px; height: 100px; background-color: blue; float: left; } #td{ width: 100px; height: 100px; background-color: green; float: left; } #container{ width: 400px; height: 500px; background-color: darkgray; } |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >浮动</ title > < link rel = "stylesheet" type = "text/css" href = "style.css" > </ head > < body > < div id = "container" > < div id = "fd" ></ div > < div id = "sd" ></ div > < div id = "td" ></ div > </ div > </ body > </ html > |
二、clear属性
去掉浮动属性（包括继承来的属性）
left、right 去掉元素向左、向右浮动
both 左右两侧均去掉浮动
inherit 从父级继承来clear的值
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >浮动</ title > < link rel = "stylesheet" type = "text/css" href = "style.css" > </ head > < body > < div id = "container" > < div id = "fd" ></ div > < div id = "sd" ></ div > < div id = "td" ></ div > < div id = "text" >HelloWorld!</ div > </ div > </ body > </ html > |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | #fd{ width: 100px; height: 100px; background-color: red; float: left; } #sd{ width: 100px; height: 100px; background-color: blue; float: left; } #td{ width: 100px; height: 100px; background-color: green; float: left; } #container{ width: 280px; height: 500px; background-color: darkgray; } #text{ clear: left; } |
本文转自yeleven 51CTO博客，原文链接:http://blog.51cto.com/11317783/1772841
转载地址：http://dbdxx.baihongyu.com/