浮动特点

诚美
255 阅读7分钟

特点1 浮动实现字围（新闻）

<style>
    .div1{
        float: left;
        background-color:palegoldenrod;
        width: 100px;
        height: 100px; 
    }
</style>
<body>
   <div class="div1"></div>
        HTTP 协议本身并不复杂，理解起来也不会花费太多学习成本，但纯
        概念式的学习稍显单调。前端工程师也许对各种具有炫酷效果的页面
        的实现技巧、赏心悦目的 UI 框架更感兴趣，但因此常常忽视了 HTTP
        协议这部分基础内容。实际上，如果想要在专业技术道路上走得更坚 
        HTTP 协议本身并不复杂，理解起来也不会花费太多学习成本，但纯
        概念式的学习稍显单调。前端工程师也许对各种具有炫酷效果的页面
        的实现技巧、赏心悦目的 UI 框架更感兴趣，但因此常常忽视了 HTTP
        协议这部分基础内容。实际上，如果想要在专业技术道路上走得更坚  
</body>

效果：

特点2 在一个父元素内部，如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就让向上排

浮动前：
     <style>
        .father{
            width: 300px;
            height: 300px;
            border: 1px dashed red;
        }
        .son{
            width: 50px;
            height: 50px;
        }
    </style>
    <div class="father">
        <div class="son" background-color: palegoldenrod;"></div>
        <div class="son" style="background-color: pink;"></div>
        <div class="son" style="background-color: paleturquoise;"></div>
    </div>

效果： 

浮动后：
     <style>
        .father{
            width: 300px;
            height: 300px;
            border: 1px dashed red;
        }
        .son{
            width: 50px;
            height: 50px;
        }
    </style>
    <div class="father">
        <div class="son" style="float:left;background-color: palegoldenrod;">
        </div>
        <div class="son" style="background-color: pink;"></div>
        <div class="son" style="background-color: paleturquoise;"></div>
    </div>

特点3 浮动可以让多个男标签并排显示，如果多个元素浮动了，那么这们就会并排显示，如果都是同一个方向的浮动，它们会紧紧地贴在一起。

 <style>
        .father{
            width: 300px;
            height: 300px;
            border: 1px dashed red;
        }
        .son{
            width: 50px;
            height: 50px;
        }
</style>
<div class="father">
    <div class="son" style="float:left;background-color: palegoldenrod;"></div>
    <div class="son" style="float:left;background-color: pink;"></div>
    <div class="son" style="float:left;background-color: paleturquoise;"></div>
</div>

效果：

特点4 如果一个元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，如果是左浮动，就向左移动，直到移动到父元素的左边界，如果是向右浮动，就向右移动，直接移动到父元素的右边界。

特点5 如果一个元素没有设置高度，它的高度是靠里面的内容撑起来的。如果父元素内部元素都浮动了，那么会造成父元素的高度塌陷。

没有设置高度的情况（在本例中没有给父元素设置高度）：

  <style>
        .father{
            width: 300px;
            border: 1px dashed red;
        }
        .son{
            width: 50px;
            height: 50px;
        }
 </style>
 <div class="father">
    <div class="son" style="background-color: palegoldenrod;"></div>
    <div class="son" style="background-color: pink;"></div>
    <div class="son" style="background-color: paleturquoise;"></div>
 </div>

效果：

设置父元素的内部元素全部浮动，会造成父元素的高度塌陷的情况：
    <style>
        
        /* 没有给父元素设置高度的情况 */
        .father{
            width: 300px;
            border: 1px dashed red;
        }
        .son{
            width: 50px;
            height: 50px;
        }
    </style>
    <div class="father">
        <div class="son" style=" float: left;;background-color: palegoldenrod;">
        </div>
        <div class="son" style=" float: left;;background-color: pink;"></div>
        <div class="son" style=" float: left;;background-color: paleturquoise;">
        </div>
    </div>

效果：

特点6 如果元素浮动了，那么它会造成影响：造成父元素高度塌陷。解决:显示加高度（加高法） 小偏方（overflow:hidden）

加高法：
  <style>
        /* 加高法 */
        .father{
            width: 200px;
            height: 200px;
            border: 1px dashed red;
        }
        .son{
            width: 50px;
            height: 50px;
        }
  </style>
  <div class="father">
    <div class="son" style=" float: left;background-color: palegoldenrod;">
    </div>
    <div class="son" style=" float: left;background-color: pink;"></div>
    <div class="son" style=" float: left;background-color: paleturquoise;">
    </div>
  </div>

效果：

小偏方（overflow:hidden）：
    .father{
        width: 200px;
        border: 1px dashed red;
        overflow: hidden;
    }

特点7 如果元素浮动了，它也会造成对后面的兄弟元素影响。解决：clear:both/left/right

<div class="father">
    <div class="son" style=" background-color: palegoldenrod;"></div>
    <div class="son" style=" float: left;background-color: pink;"></div>
    <div class="son" style=" clear: both;background-color: paleturquoise;"></div>
</div>

效果：

特点8 当一个浮动起来的男盒子，没有设置width，那么这个盒子的宽高会尽可能小，小到包裹住它里面的内容，这叫包裹性
div

效果：

特点9 如果一个女盒子浮动了，那么就可以设置宽高了，相当于把它变成男标签。

 <span style="float: left;width:100px;height:100px;border: 1px solid salmon;">
    span
 </span>

效果：

特点10 如果父元素也浮动了，那么就不会出现高度塌陷了。

 <style>
    .father{
        float: left;
        width: 200px;
        border: 1px dashed red;
    }
    .son{
        width:50px;
    }
 </style>
 <div class="father">
    <div class="son" style="float: left ;background-color: palegoldenrod;">
        div
    </div>
    <div class="son" style="float: left ;background-color: palegreen;">div</div>
    <div class="son" style="float: left ;background-color: papayawhip;">div</div>
</div>

效果：

特点11 一个元素浮动了，那么它也是受父元素的控制。当父元素宽度变小时，装不下所有的子元素时，后面的子元素有贴靠性。当父元素小到极限时，里面的浮动的子元素宽度是不会改变的。

元素浮动会造成影响（清除浮动）：

    1，对父元素造成的影响
        父元素高度塌陷
            解决：显示加高度（加高法）  小偏方（overflow:hidden）  clear:both 
                加高法：简单   基本不用   大部分情况情况下，父元素的高度是需要子元素撑起来
                overflow:hidden : 简单  使用了overflow:hidden 父元素的高度会随着子元素的高度变化而变化    overflow:hidden本职工作是用来处理溢出  在使用过程中，需要注意子元素如果想要超出父元素高度，此时overflow:hidden就不适合了。
                clear:both 在所有子元素后面加一个空的div 在这个div上面加clear:both  ---> 内qiang法
                    优点：clear:both专业清除浮动的  缺点：多写一个代码
    2，对后面兄弟元素造成的影响
        兄弟元素会向上移动
            解决：在受影响的元素上面的加 clear:both

验证 内qiang法,在所有子元素后面加一个空的div 在这个div上面加clear:both

没有加空的div之前的效果：


加了空的div之后的效果：

 <style>
    .father{
        width: 200px;
        border: 1px solid rebeccapurple;
    }
    .son{
        width: 50px;
        height: 50px;
        float: left;
    }
    .one{
        background-color: palegoldenrod;
    }
    .two{
        background-color: palegreen;
    }
    .three{
        background-color: palevioletred;
    }

</style>

验证 对后面兄弟元素造成的影响，兄弟元素会向上移动。解决：在受影响的元素上面的加 clear:both

<div style="width: 100px;height:100px;background:palevioletred;"></div>
<div style="float: left;width: 100px;height:100px;background:pink;"></div>
<div style="clear: both;width: 100px;height:100px;background:rebeccapurple;"></div>

效果：

项目中最常用清除浮动的方法： 利用伪元素 after

说白了，就是写一个清除浮动的类，如下：
.clear:after{content=""; display:block; clear:both; height:0; overflow:hidden;}
<style>
    .clear:after{
        clear: both;
        overflow: hidden;
        display: block;
        content: "";
        height: 0;
    }
    .father{
        width: 300px;
        border: 3px solid black;
    }
</style>
<div class="father clear">
    <div style="float: left;width: 100px;height:100px;background:palevioletred;"></div>
    <div style="float: left;width: 100px;height:100px;background:pink;"></div>
    <div style="float: left;width: 100px;height:100px;background:rebeccapurple;"></div>
</div>

效果：

avatar
文章
阅读
粉丝