浮动（float）

浮动（float）

三种机制

用CSS摆放盒子

1.普通流 1）块级元素独占一行，从上向下 2）行内元素，从左到右

2.浮动 让多个块级元素排成一行 3.定位

浮动用法

选择器 {float：属性值；}

属性值：none；left；fight；

浮动特点

1.不会压住边框，内边距 2.在一个大盒子中，第一个盒子是普通流，第二个盒子浮动，两个盒子一行占一个（一般不给大盒子高度）

清除浮动

含义：

使父级元素能感受到子级浮动的高度，从而把父级元素的高度从0撑开

表现：

选择器 {clear：属性值；}

用法：

1.额外标签法（隔墙法） 在浮动元素末尾添加一个空标签 在style中添加 选择器 {clear：both；}

2.给父级添加 overflow：hidden（超出的内容隐藏）

3..after伪元素 .clearfix:after { content:"";display:block;height:0;clear:both;visibility:hidden;} .clearfix{*zoom:1;} (IE6、7专有)

4.双伪元素 .clearfix:before,.clearfix:after {content:"";display:table;} .clearfix{*zoom:1;}