十年专注于网站建设与互联网应用开发,低调、有情怀的网络应用服务商!
南昌百恒科技微信公众号 扫一扫关注
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒科技微信公众号

CSS中为什么要清除浮动?如何清除?

百恒 2019-10-14 15:19:28 146
    清除浮动是指清除掉元素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;}

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
备案专线 备案专线
 
售后服务 售后服务
 
×