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;
            }

      

  • 相关阅读:
    springmvc 处理静态资源
    springmvc jsp 获取 上下文
    springmvc 如何设置首页
    servlet-mapping url-pattern / 和 /*区别
    nginx支持php
    openresty 变量
    git tag用法
    python 导入模块,__init__.py 的作用
    python 转码问题
    python装饰器
  • 原文地址:https://www.cnblogs.com/qiuchuanji/p/11428026.html
Copyright © 2011-2022 走看看