认识浮动

Posted 2020-10-20 tail33

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

浮动元素对布局的影响

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

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

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

<div class="parent">
        <div class="float-div">浮动元素</div>
        <span>浮动元素后面跟随的行内元素span</span>
</div>

 

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

<style>
       .float-div{
           float:left;
           width:100px;
           height: 100px;
           background-color: orange;
       }
       span{
          margin-left: -30px;
          background-color: red;
       }
</style>

　　

效果如下：

 

 

 

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

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

代码：

<div class="parent">
        <div class="float-div">浮动元素</div>
        <div class="div">浮动元素后面跟随的块级元素div</div>
        <span>浮动元素后面跟随的行内元素span</span>
</div>

<style>
       .float-div{
           float:left;
           width:100px;
           height: 100px;
           margin: 20px 0 0 20px;
           background-color: orange;
       }
       .div{
           height: 100px;
           width: 200px;
           background-color: blue;
       }
       span{
          margin-left: -30px;
          background-color: red;
       }
    </style>

 

效果：

 

 

 

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

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

我们来看一个例子

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

<div class="div1"></div>
<div class="div2"></div>

<style>
       div{
           width: 100px;
           height: 100px;
           background-color: orange;
       }
       .div1{
           margin-bottom: 70px;
       }
       .div2{
           margin-top: 50px;
       }
 </style>

 

效果

 

 

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

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

 

 

 

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

css 权威指南上这么说：

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

撑起父元素高度

当父元素中的子元素都浮动后，父元素里面没有任何内容撑起高度的话，高度就会为0.
通常需要父元素也要有高度的话，可以用以下的方法
1.父元素也设置成浮动元素
2.给父元素添加一个子元素<div></div> ,然后为这个子元素添加style：clear:both;