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>
    
    注意:一般不用这个方法,会引起父级元素排版问题。

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

  • 相关阅读:
    LINUX下mysql的大小写是否区分设置 转
    在CentOS搭建Git服务器 转
    Idea实现WebService实例 转
    Intellij 中的git操作 转!
    Maven配置 settings.xml 转
    Maven使用第三方jar文件的两种方法 转
    Maven : 将Jar安装到本地仓库和Jar上传到私服 转
    maven 私服 配置 转
    Maven 私服配置 转
    Linux 下挂载硬盘的 方法
  • 原文地址:https://www.cnblogs.com/mazey/p/8629256.html
Copyright © 2011-2022 走看看