zoukankan      html  css  js  c++  java
  • 关于清除浮动的几种方法

      给元素设置浮动是开发中比较常见的,但是设置浮动后,会导致元素脱离正常的文档流,影响页面的布局,如果不对元素进行清除浮动的处理,会对页面布局造成

    很多影响。

      在什么情况下需要清除浮动呢?

        当父元素没有设置宽度或者高度的时,又需要子元素撑开父元素的时候使用清除浮动。

      不清除浮动会有什么影响?

        1.父元素在不设置宽高的情况下,子元素设置了浮动,会造成父元素的宽高无法被撑开

        2.后续页面布局造成影响

        3.父级设置的一些背景不能正确显示,因为父级没有宽高

      基础布局html+css

        <div class="Box">
            <div class="boxItem1"></div>
            <div class="boxItem2"></div>
         </div>
        <div class="Box2"></div>
        <style>
            .boxItem1{
                width: 100px;
                height: 100px;
                background: red;
                float: left;
            }
            .boxItem2{
                width: 100px;
                height: 100px;
                background: red;
                float: left;
            }
            .Box2{
                width: 100px;
                height: 100px;
                background: black;
                float: left;
            }
        </style>

      提供的几种清除浮动方法:

        方法1:在设置浮动的最后一个元素后面加上一个空标签,设置css为clear: both;即可

        方法2:给浮动元素的父级设置css样式overflow为auto或者hidden

        方法3:通过设置浮动元素父级的伪元素after来清除样式     

            .Box:after{
                content:"";
                display: block;
                clear:both;
            }

      

  • 相关阅读:
    Balanced Substring
    解决vscode可以编译通过c++项目,但头文件有红色波浪线的问题
    Poj2299---Ultra-QuickSort
    树状数组
    内置函数
    函数式编程,尾调用,map函数,filter函数,reduce函数
    函数作用域和匿名函数
    函数参数/局部变量与全局变量/前向引用(函数即变量)
    函数的定义
    字符串格式化
  • 原文地址:https://www.cnblogs.com/qiuchuanji/p/11428026.html
Copyright © 2011-2022 走看看