日常胡说八道:
块元素在文档流中默认垂直排列，所以多个div从上至下依次排开
如果希望块元素在页面中水平排列，可以使用float来使元素浮动，从而脱离文档流,元素脱离文档流以后，它下边的元素会立即向上移动
css浮动的特性
1.浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围
2.元素浮动以后，会尽量向页面的左上或这是右上漂浮,直到遇到父元素的边框或者其他的浮动元素
3.如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
4.浮动的元素永远不会超过他上边的兄弟元素,最多一边挤
5.块元素脱离文档流以后,默认的高度和宽度都丢失.高宽会被内容撑开(不再是默认的占父元素100%)(这是脱离文档流的特点,不仅仅是浮动才会这样)
6.内联元素脱离文档流后,会变成块元素(所有元素一旦脱离文档流.全都会变成块元素)
<style>
body{color:#FFFFFF;}
.box1{
width: 400px;height: 100px;
background-color:red;
float: left;
}
.box2{
width: 400px;height: 100px;
background-color:Black;
float: left;
}
.box3{
width: 100px;height: 100px;
background-color:Blue;
float: right;
}
</style>
<div style="width:550px;border:5px solid #FF4500;overflow:hidden;">
<div class="box1">box1左浮动</div>
<div class="box2">box2左浮动</div>
<div class="box3">box3右浮动(为什么不到右上角?)</div>
<!--浮动的元素永远不会超过他上边的兄弟元素,最多一边挤-->
</div>浮动的影响与清除浮动
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是子元素浮动后,因为脱离了文档流,所以子元素无法撑起父元素的高度.导致父元素高度消失.后面的元素都将会向上移动.最终导致页面布局混乱。
清除浮动方法1(针对父子元素)：
给父元素指定一个高度直接写死（不推荐）
清除浮动方法2(针对父子元素)：
给父元素开启BFC。（BFC详细介绍）
清除浮动方法3:清除浮动clear(针对兄弟元素)
clear可以用来清除其他浮动元素对当前元素的影响,仅仅是清除影响,清除浮动后.元素会回到其他元素浮动之前的位置
如果前面的元素是左浮动:clear:left
如果前面的元素是右浮动:clear:right
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。(清除对元素影响最大的那个元素浮动) |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
清除浮动导致高度塌陷问题(父子元素)：
可以直接在高度塌陷的父元素的最后，添加一个空白的div,并设置clear
但是此方法会添加冗余代码.因此可使用css进行添加伪元素:
.父元素:after{
content:"";
display:block;
clear:both;
}