百恒网络
CSS中为什么要清除浮动?如何清除?
  • 百恒服务
  • APP开发
  • 网页案例
  • 网页知识
  • 关于我们
  • 联系我们
  • CSS中为什么要清除浮动?如何清除?

    2019-10-14 15:19:28 2265
        清除浮动是指清除掉元素float属性。清除浮动-使用clear元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用clear属性。我们在CSS中引入了clear:left|right|both属性,其作用分别是在元素的左侧|右侧|两侧不允许存在float元素,我们可以用他来清除其副作用。

        一、浮动引起的问题

        (1)父元素的高度无法被撑开,影响与父元素同级的元素;

        (2)与浮动元素同级的非浮动元素会跟随其后;

        (3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构;

        二、清除浮动的方法

        1、利用clear清除浮动

        .son {

        clear: left | right | both | auto

        }

        2、父元素上使用after伪类

        #parent:after {

        content: '';

        clear: both;

        height: 0;

        display: block;

        }

        3、利用overflow清除浮动

        #parent {

        overflow: auto;

        display: inline-block;

        }

        4、父级div定义 伪类:after 和 zoom

        .clearfix:after{

        content:'.';

        display:block;

        height:0;

        clear:both;

        visibility: hidden;

        }

        .clearfix {zoom:1;}

    展开分享
    服务
    案例
    首页
    动态
    联系
    咨询