浮动 1.1标准文档流块级元素：独占一行h1~h6,p,div,列表……行内元素：不独占一行span,a,img,strong……行内元素可以被包含在块级元素中，反之不行1.2 display<!-- block 块元素 inline 行内元素 inline-block 是块元素，但是可以内联（可以有行内元素的属性），在一行 --> <style> div{ width: 100px; height: 100px; border: 1px solid red; display: inline; } span{ width: 100px; height: 100px; border: 1px solid red; display: inline-block; } </style>注：display也是实现行内元素排列的一种方式，但通常情况下float使用较多。1.3 floatdiv{ margin: 10px; padding: 5px; } #father{ border: 1px solid red; } .layer01{ border: 1px solid red; display: inline-block; float: right; } .layer02{ border: 1px solid red; display: inline-block; float: right; } .layer03{ border: 1px solid red; display: inline-block; float: right; } .layer04{ border: 1px solid red; font-size: 16px; line-height: 24px; display: inline-block; float: right; }1.4 父级边框塌陷问题clear/* clear: right; 右侧不允许有浮动元素 clear: left; 左侧不允许有浮动元素 clear: both; 两侧不允许有浮动元素 clear: none; */ .layer04{ border: 1px solid red; font-size: 16px; line-height: 24px; display: inline-block; float: right; clear: right; }解决方案：1、增加父级元素的高度#father{ border: 1px solid cornflowerblue; height: 800px; }2、增加一个空的div标签，清除浮动.clear{ clear: none; margin: 0; padding: 0; } <div class="clear"></div>3、overflow/*在父级元素中，增加一个 overflow: hidden；方法*/ #father{ border: 1px solid cornflowerblue; overflow: hidden; }4、在父类添加一个伪类：after#father:after{ content: ''; display: block; clear: both }小结：浮动元素后面增加空div简单，但需注意代码中尽量避免空div设置父元素的高度如果元素有固定高度，会被限制overflow在下拉的一些场景中避免使用父类添加一个伪类：after（推荐使用）display：方向不可以控制float：浮动起来后会脱离标准文档流，需解决父级边框塌陷问题