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

最新推荐文章于 2023-07-02 20:01:50 发布

原创最新推荐文章于 2023-07-02 20:01:50 发布 · 964 阅读

2 ·

CC 4.0 BY-SA版权

前端概念性知识点专栏收录该内容

5 篇文章

订阅专栏

本文介绍了四种常用的浮动布局清除方法：使用空标签、after伪对象、设置overflow属性及浮动外部元素。这些方法有助于解决网页布局中常见的浮动问题。

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

  1.使用空标签清除浮动。

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

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

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

    #parent:after{

　　content:".";

　　height:0;

　　visibility:hidden;

　　display:block;

　　clear:both;

　}

  3.设置overflow为hidden或者auto

  4.浮动外部元素