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

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

  • 相关阅读:
    XML与JSON的区别?各自有哪些优缺点?
    js数组操作(增、删、改、查)
    Ajax缓存原理
    Ajax的跨域问题分析
    简单理解javascript的闭包
    CSS的导入方式:link与import方式的区别
    谈谈iframe的优缺点
    winform全局异常捕获
    Dispatcher.BeginInvoke()方法使用不当导致UI界面卡死的原因分析
    解决asp.net中“从客户端中检测到有潜在危险的Request.Form值”的错误
  • 原文地址:https://www.cnblogs.com/mazey/p/8629256.html
Copyright © 2011-2022 走看看