美文网首页
解释下浮动和它的工作原理?清除浮动的方法

解释下浮动和它的工作原理?清除浮动的方法

作者: Grit_1024 | 来源:发表于2020-10-12 15:38 被阅读0次

    浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

    1、使用空标签清除浮动

    这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

    2、使用after伪对象清除浮动

    该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;

    parent::after{
      content:"";
      height:0;
      visibility:hidden;
      display:block;
      clear:both;
    }
    
    

    3、溢出隐藏

    overflow: hidden;
    
    

    4.浮动外部元素

    相关文章

      网友评论

          本文标题:解释下浮动和它的工作原理?清除浮动的方法

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