zoukankan      html  css  js  c++  java
  • 关于浮动与清除浮动

    <div class='parent'>

      <div style='float:left'></div>

    </div>

    当给一个子元素设置浮动属性时,这个子元素就脱离了文档流,从形式上不再属于父元素,因此它的父元素的高度就会受到影响,内容不被撑开,为了清除子元素浮动带来的负面影响,可以有以下方法解决

    1,给直接父元素设置inline-block或float属性(不推荐)

    2,在浮动的子元素后面加上br标签并设置clear属性,如<br style='clear:both'/>

    3,给直接父元素设置伪类,如.parent:after{content:'',display:block;clear:both} (推荐)

    后续思考:为什么在浮动的元素后面增加一个元素,且设置clear属性后,父元素的内容高度就会被撑开,因为父元素的高度由最后一个子元素的底(bottom)在页面中的位置决定的。整个页面是坐标,从左上角0,0点开始,所以,从上面的例子看,当子div浮动后,父div没有子元素了,高度就是一条线(如果没有给父元素设置固定高度的话),我们知道如果浮动元素后面还有其他元素,如果不清除浮动,它就会占领浮动元素的位置(往上移),所以在浮动元素后加一个元素,且清除浮动,哪怕它的高度是0,父元素也会被撑开,因为父元素的最后一个子元素保持在页面坐标中的Y值没有变。

  • 相关阅读:
    jquery选择器(复习向)
    如何使元素/文字 垂直居中?
    mvc与mvvm的区别与联系
    python16_day26【crm 增、改、查】
    python16_day25【crm】
    python16_day24【restful、crm表构、认证】
    python16_day23【cmdb前端】
    django 【认证】
    python16_day22【cmdb注释】
    django【F和Q】
  • 原文地址:https://www.cnblogs.com/toward-the-sun/p/4734737.html
Copyright © 2011-2022 走看看