css浮动布局

布局

 使用盒子来进行布局，布局目的是为了让块元素在一行中显示

<div class="content">
    <div></div>
    <div></div>
    <div></div>
</div>

1) 浮动布局
    .content > div {float:left;}

float:left;
    让元素进行浮动：1. 脱离文档流（1. 宽高如果没有指定，其由内容决定；2. 元素脱了文档流后不占据屏幕空间，其下面的块元素就会顶上来）2. 所有的浮动元素会进入到另外一个文档流（浮动文档流），在浮动文档流中所有的浮动元素会在一行显示，当这一样放不下的时候就会进入到下一行
    3. 由于浮动元素脱离了文档流，那么就会对父元素【非浮动的块元素】失去了支撑
    解决方案：在父元素中插入一个伪元素，让这个伪元素清理浮动