美文网首页
浮动元素高度问题

浮动元素高度问题

作者: nickNic | 来源:发表于2019-07-16 10:46 被阅读0次

    一在标准流中内容的高度可以撑起父元素的高度
    二在浮动流中内容的高度不可以撑起父元素的高度

    三清除浮动方式1
    1给前面一个父元素设置高度
    注意点
    企业开发中,能不写高度就不写高度,所以不太推荐

    清除浮动方式2
    给后面的盒子添加clear属性

    clear属性
    none:默认取值,按照浮动元素的排序规则来排序(左浮动找左浮动右浮动找右浮动)
    left:不要找前面的左浮动元素
    right:不要找前面的右浮动元素
    both:不要找前面的左浮动元素和右浮动元素
    注意点
    当给某个元素添加clear属性后,那么这个属性的margin就会失效

    清除浮动方式3隔墙法
    外墙法
    在两个盒子中间添加一个额外的块级元素
    给这个额外的块级元素设置clear:both属性
    注意点
    外墙法可以让第二个盒子使用margin-top属性
    外墙法不可以让第一个盒子使用margin-bottom属性

    内墙法
    在第一个盒子中所有子元素最后添加一个额外的块级元素
    给这个额外的块级元素设置clear:both属性
    注意点
    内墙法可以让第二个盒子使用margin-top属性
    内墙法可以让第一个盒子使用margin-bottom属性

    外墙法和内墙法的区别
    外墙法不能撑起第一个盒子的高度,而内墙法可以撑起第一个盒子的高度

    在企业开发中不常用隔墙法来清除浮动

    相关文章

      网友评论

          本文标题:浮动元素高度问题

          本文链接:https://www.haomeiwen.com/subject/tybnkctx.html