本文共 1021 字，大约阅读时间需要 3 分钟。

浮动

文档流

文档流处在网页最底层，它表示的是一个页面中的位置，我们所创建的元素都默认在文档流中。

块元素：独占一行，自上而下排列 可以设置高度和宽度

内联元素：只占自身大小，默认从左向右 设置高度和宽度无效，大小由内容撑开

display

		
   		
   								
   
    div
   
		span	

float

有高度塌陷的问题

使用浮动从而脱离文档流

块元素脱离文档流，高度和宽度都被内容撑开

内联元素脱离文档流会变成块元素

浮动的元素不会挡住文字

`		
   		
   								
   
			
    
			
    
			
    
			
    				王掌柜，常四爷，秦二爷，宋二爷…… 六十年的老茶馆，终究没有能抵挡得住那股浊气弥漫的年代。 见证了是非转变的王掌柜，终究没有逃脱恶霸流氓的欺辱。 一心实业救国的秦二爷，终究穷困潦倒无所获。 问心无愧的常四爷，孤独终生无人送终。 宋二爷爱鸟如命，却终被浊气所污。 这些个见证了六十年时代的更变，从大清受洋... 					
   
	

清除浮动

clear:both清除两边浮动 left清除左边浮动 right清除右边浮动 none不清除浮动

#s2{       border: 1px solid rosybrown;    display: block;    clear: both;}

解决父元素高度塌陷问题

1.给父元素固定的高度

#father{       border: 2px solid rosybrown;    height: 300px;}

2.在父元素的最后设置空的div

   
.clear{    clear: both;    margin: 0;    padding: 0;}

3.使用overflow（visible不会对溢出内容做任何处理 hidden对溢出的内容修剪 scroll为父元素添加滚动条 auto根据需要添加滚动条）

#father{       border: 2px solid rosybrown;    overflow: hidden;}

4.给父类使用after伪类（推荐）

#father:after{       content: '';    display: block;    clear: both;}

如有不对的地方欢迎指出，大家共同进步！