float-The idle Process

Posts

Showing posts with the label float

clear元素清除浮动float

clear元素用来清除左边或者右边或者两边的浮动元素(float) 比如： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> img { float:left; border:1px solid red; } p.clear { clear:both; } </style> </head> <body> <img src="logocss.gif" width="95" height="84" /> <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p> <p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p> </body> </html> 第一段p没有指定clear，因此左边会有图片，而第二段class是clear，clear: both，清除了两边的浮动元素，左右都不会出现浮动元素，所以它自己占单独的行，不和其他浮动元素占一行。

css中元素间的空格（space）

空格表示的是一种从属关系，或者说是父子关系。如: header .right { float: right; } 表示header元素下的.right类。这个权重也会比单独的.right高1. 在html中class中的空格，则是表示一种并列关系，比如： < div class = "divider lg" ></ div > 表示这个div既属于 divider类，也属于 lg 类。

css中的浮动(float)

float元素的初心是为了图片的环绕样式，CSS可以设置元素(element)在容器(container)中的位置。 <div class="right">This will be placed in the right of the parent container.</div> .right { float: right ; }