HTML5学习笔记-Day6

Day6 浮动(float)

标准流:块级元素纵向排列;

盒子加了float属性就会脱离标准流

-顶端对齐

-具有行内块(inline-block)特性

常搭配标准流的父元素(约束位置)

清除浮动 ——为了避免影响下面的布局

不指定父元素高度，随子元素变化

①额外标签(隔墙法)

<div style="clear: both"></div>

②父元素overflow:hidden;隐藏溢出的部分

③给父元素添加:after伪元素   (IE 6~7不支持)

.clearfloat:after {

content: "";

display: block;

height: 0;

clear: both;

visibility: hidden;
}

④双伪元素

.clearfloat:before {

content: "";

display: table;

}

.clearfloat:after {

content: "";

display: table;

clear: both;
}