1.float
float:left | right | none | inherit 默认:none
。默认宽度为内容宽度
。脱离文档流
。向指定方向一直移动
图 float的元素在同一文档流
图 float元素半脱离文档流:对元素,脱离文档流;对内容,在文档流
2.clear
。clear: both | left | right | none | inherit
。应用于后续元素
。应用于块级元素
clearfix 清除浮动
.clearfix:after{
content:'.';
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}```
###3.布局:两列布局
//html
<div class="body clearfix">
<div class="side">side</div>
<div class="main">main</div>
</div>```
//css
.side{float:right;width:200px;}
.main{float:left;width:500px;}
.clearfix:after{content:'.';display:block;clear; both;height: 0;overflow: hidden;visibility: hidden;}```