使用float后清除浮动的几种方法

float 属性用于定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。

浮动元素会生成一个块级框,而不论它本身是何种元素。所有主流浏览器都支持 float 属性。

注意:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

使用 float 属性后 元素会跳出当前区域,下面的元素会挤占上来,所以需要清除浮动,清除 float 浮动常用的方法有以下几种:

1、同辈元素清除浮动:clearfix

有以下两点需要注意:

  1. 清除浮动元素本身不能为浮动元素;

  2. 清除浮动的元素必须是块级元素;

HTML代码如下:

<ul>
    <li class="fl">li1</li>
    <li class="fl">li2</li>
    <li class="fl">li3</li>
    <li class="clearfix"></li>
</ul>

style部分代码,先设置浮动元素,给一个宽高和边框,方便观察:

.fl{
	float: left;
	border: 1px solid red;
	height: 80px;
	width: 500px;
}

清除浮动代码:

.clearfix{
    clear: both;
}

但是这个方法有一个缺点,会增加无意义的空标签。

2、父辈元素清除浮动,常用的方法有两种:

第一种:给父元素设置 overflow:hidden 或者 auto。

ul{
    padding: 0;
    border: 1px solid green;
    overflow: auto;
    /*overflow: hidden;*/
}

此方法也有一个缺点,就是 hidden 超出部分会隐藏,对SEO不太友好,auto超出部分会出现滚动条,影响美观。

第二种:使用伪元素清除浮动:before||after;

ul::after{
            content: '';/*必须要加的*/
            display: block;
            clear: both;
}

此方法比较常见,推荐使用。

未经允许不得转载:前端资源网 - w3h5 » 使用float后清除浮动的几种方法

赞 (4)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)