zoukankan      html  css  js  c++  java
  • 浮动元素引起的问题和解决办法

    一、问题

    1. 多个浮动的元素无法撑开父元素的宽度,父元素的高度可能会变成0。
    2. 若浮动元素后面跟非浮动元素,非浮动元素会紧随其后浮动起来。
    3. 若浮动元素前面还有同级元素没有浮动则会影响页面结构。

    二、解决办法

    1.clear:both

    在最后一个浮动元素后面添加属性为clear:both;的元素。

    <style>
    div.parent>div.fl{
        float: left;
         200px;
        height: 200px;
        margin-right: 20px;
        border: 1px solid red;
    }
    .clear{
        clear: both;
    }
    </style>
    <div class="parent">
        <div class="fl">1</div>
        <div class="fl">2</div>
        <div class="fl">3</div>
        <div class="fl">4</div>
        <div class="clear">5</div>
    </div>
    

    给父元素添加clear:both;属性的:after伪元素。

    <style>
    div.parent>div.fl{
        float: left;
         200px;
        height: 200px;
        margin-right: 20px;
        border: 1px solid red;
    }
    .clear:after{
        content: '';
        display: block;
        clear: both;
    }
    </style>
    <div class="parent clear">
        <div class="fl">1</div>
        <div class="fl">2</div>
        <div class="fl">3</div>
        <div class="fl">4</div>
    </div>
    
    注意:伪元素默认是内联水平,所以借助伪元素时要设置属性display: block;

    2.overflow:auto / overflow: hidden

    <style>
    div.parent{
        overflow: auto;
        /*overflow: hidden;也可以*/
    }
    div.parent>div.fl{
        float: left;
         200px;
        height: 200px;
        margin-right: 20px;
        border: 1px solid red;
    }
    </style>
    <div class="parent">
        <div class="fl">1</div>
        <div class="fl">2</div>
        <div class="fl">3</div>
        <div class="fl">4</div>
    </div>
    

    3.浮动父级元素

    <style>
    div.parent{
        float: left;
    }
    div.parent>div.fl{
        float: left;
         200px;
        height: 200px;
        margin-right: 20px;
        border: 1px solid red;
    }
    </style>
    <div class="parent">
        <div class="fl">1</div>
        <div class="fl">2</div>
        <div class="fl">3</div>
        <div class="fl">4</div>
    </div>
    
    注意:一般不用这个方法,会引起父级元素排版问题。

    浮动元素引起的问题和解决办法

  • 相关阅读:
    bzoj2301: [HAOI2011]Problem b懵逼乌斯反演
    bzoj3504: [Cqoi2014]危桥 网络流
    bzoj1588: [HNOI2002]营业额统计 splay瞎写
    bzoj1008快速面
    洛谷1212手动枚举各种情况(缩代码成瘾)
    bzoj1968真·想sha法bi题
    bzoj3674同上(好短)
    bzoj3673可持久化线段树实现可持久化数组实现可持久化并查集(好长)
    uoj98未来程序改 纯暴力不要想了
    bzoj3680模拟退火
  • 原文地址:https://www.cnblogs.com/mazey/p/8629256.html
Copyright © 2011-2022 走看看