浮动float

浮动float
1.浮动解决的问题是如何让元素横着（水平）排列，解决方法就是给要横着排列的元素设置浮动float

2.浮动的元素会脱离正常文档流（正常文档流可以理解为没做任何css样式改变时候的html从上到下的顺序结构）
（1）给红色盒子设置left浮动后可以看到蓝色盒子不见了，其实不是不见了，而是因为红色盒子脱离了文档流，蓝色盒子重叠到了红色盒子下面，将蓝色盒子的宽高设置大一点就可以看到

3.在没给父元素设置高度的状态下，子元素浮动会造成父元素的塌陷
下面就是父元素塌陷的表现，可以看到bigBox的粉红背景没有了

但是如果只是部分子元素浮动，父元素的高度由正常文档流的子元素撑开

重点：如何解决父元素的塌陷
只要用到了浮动float，马上审查父元素看父元素是否有塌陷，如果有，立即清除浮动。
父元素塌陷：
父元素没设置高度时，子元素全部浮动时，子元素的高度并没有撑起父元素的高度。
解决父元素塌陷：（最好用clear清除浮动的方式，即法2和法4）
1.设置父元素的固定高度（迫不得已时使用）
2.给父元素添加最小的子元素

,设置#clear样式为clear:both;（最常规的方法）

3.给父元素设置溢出隐藏overflow:hidden;

4.给父元素设置一个伪元素::after
	.clearDiv::after{content:  ’’;display:block;clear:both;}

5.让父元素浮动