认识浮动 float

关于浮动，原本是用于方便文字围绕图片。但后来发现它在布局发挥的作用更大

浮动元素对布局的影响

把一个元素设置成浮动元素，无论它是什么元素，浮动元素会变成块级元素，它会从文档的正常流删除，还会影响布局。

首先来看浮动元素后面跟随着行内元素

一个浮动元素，一个行内元素

        
浮动元素
        浮动元素后面跟随的行内元素span

我们把行内元素的左外边距设置成 -30px

效果如下：

image.png

我们可以得出结论，浮动元素和后面跟随的行内元素如果发生覆盖的话，行内元素会覆盖浮动元素。

相反，如果后面跟随的是块级元素跟浮动元素发生覆盖的话，浮动元素会覆盖块级元素，但不会覆盖内容。

代码：

        
浮动元素
        
浮动元素后面跟随的块级元素div
        浮动元素后面跟随的行内元素span

效果：

image.png

这就是浮动元素和行内元素跟块级元素相互覆盖时的不同

了解过盒子模型的都知道，当两个元素在垂直方向都有外边距的时候，会发生重合，大的覆盖小的。

我们来看一个例子

第一个div的下外边距为 70px,第二个div的上外边距为50.

效果

image.png

我们把第二个元素设置成浮动后，看看效果

 .div2{
           float: left;
           margin-top: 50px;
       }

image.png

第二个元素浮动后的外边距就不会跟第一个重叠了

css 权威指南上这么说：

浮动元素的左（或右）外边界必须是源文档中之前出现的左浮动（或右浮动）元素的右（左）外边界，除非后出现浮动元素的顶端在先出现浮动元素的低端下面。

撑起父元素高度

当父元素中的子元素都浮动后，父元素里面没有任何内容撑起高度的话，高度就会为0.
通常需要父元素也要有高度的话，可以用以下的方法
1.父元素也设置成浮动元素
2.给父元素添加一个子元素

,然后为这个子元素添加style：clear:both;