一.标准文档流：元素根据块级元素或行内元素的特性按从上到下、从左到右的方式自然排列。
二.display属性用法：display：block/ inline / inline-block / none;
1.display：block; 块级元素默认值，，元素会被显示为块级元素，该元素前后会带有换行符
2.display：inline；行内元素默认值，元素会被显示为行内元素，该元素前后没有换行符
3..display：inline-block；行内块级元素，元素既具有行内元素特性，也具有块级元素特性
4.display：none; 设置元素不显示
三.浮动：float: left/right/none;
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>浮动</title> <link href="css/float.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="father"> <div class="layer01"><img src="image/photo-1.jpg" alt="日用品"/></div> <div class="layer02"><img src="image/photo-2.jpg" alt="图书"/></div> <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子"/></div> <div class="layer04"> 浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。 </div> <!--<div class="aa"></div>--> </div> </body> </html>
div { } #father { border:1px #000 solid; width: 700px; overflow: hidden; } .layer01 { border:1px #F00 dashed; float: left; } .layer02 { border:1px #00F dashed; float: left; } .layer03 { border:1px #060 dashed; float: left; } .layer04 { border:1px #666 dashed; font-size:12px; line-height:23px; float: left; } /*.layer04{*/ /*clear:both;*/ /*}*/ /*.aa{*/ /*clear: both;*/ /*}*/
三.清楚浮动：clear: left /right / both;
四.解决父级边框塌陷方法：
1.浮动元素后面加空div
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>浮动</title> <style>
#father {
border:1px #000 solid;
width: 700px;
overflow: hidden;
}
.layer01 {
border:1px #F00 dashed;
float: left;
}
.layer02 {
border:1px #00F dashed;
float: left;
}
.layer03 {
border:1px #060 dashed;
float: left;
}
.layer04 {
border:1px #666 dashed;
font-size:12px;
line-height:23px;
float: left;
}
.layer04{
clear:both;
}
.aa{
clear: both;
}
</style> </head> <body> <div id="father"> <div class="layer01"><img src="image/photo-1.jpg" alt="日用品"/></div> <div class="layer02"><img src="image/photo-2.jpg" alt="图书"/></div> <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子"/></div> <div class="layer04"> 浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。 </div> <div class="aa"></div> </div> </body> </html>
2.设置父元素高度
3.父级元素添加 overflow ,缺点是定位的元素超出父级盒子时，将出现超出部分被隐藏。取值有：overflow:visible; (默认值，内容不会被修剪，出现在盒子外)，
overflow: hidden; 内容会被修剪，且其余内容不可见
overflow:sroll; 内容会被修剪，且浏览器会显示滚动条以便查看其余内容
overflow: auto; 若内容被修剪，浏览器会显示滚动条以便查看其余内容
如：
#father{
border: 1px solid red;
overflow:hidden;
}
4.给父级添加伪类 after
.clear:after{ content:‘‘; display: block; clear: both; }
原文：https://www.cnblogs.com/Aaron-Feng/p/12003789.html