HTML5高级之css清除float浮动

最新推荐文章于 2024-06-25 16:31:50 发布

Wendy-lxq

最新推荐文章于 2024-06-25 16:31:50 发布

阅读量1w

点赞数 3

本文链接：https://blog.csdn.net/u010297791/article/details/53195603

版权

HTML & HTML5 专栏收录该内容

14 篇文章 6 订阅

订阅专栏

我们先来回忆一下float的特征：

1）块在一排显示
2）内联支持宽高
3）默认内容撑开宽度
4）脱离文档流
5）提升层级半层

由于float浮动脱离文档流，那么就很容易产生各种兼容性和由于浮动产生的视觉效果上的差别。接下来我们分析几种主要的解决方法。大家最熟悉的方法应该就是添加空标签，然后利用clear来清除浮动，其实方法很多，但是不是每种都适合我们所遇到的情况，也不是每种都能很好的兼容所有浏览器，所以需要选择适当的方法去解决这个由于浮动所产生的问题。

一、下面几个是计较传统的几种清浮动的方法，但是在目前的使用中还是有些问题

1、加高度 (扩展性不好)

如果是通过加高度进行清浮动的话，那么就意味着在设计的过程中，高度是固定的，这样就无法自适应那些需要自适应高度的情况，扩展性不好。

比如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				border: 1px solid red;
			}
			.item{
				width: 200px;
				height: 200px;
				background-color: green;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item"></div>
		</div>
	</body>
</html>

显示结果如下，外面的div无法包住里面的div，如果通过给外面的div添加高度的话，就意味着里面的内容无法自适应高度，这样的话，扩展性不好。

2、给父级加浮动 (页面中所有元素都加浮动，margin左右自动失效（floats bad ！）)
3 、.inline-block 清浮动方法 (margin左右auto失效)
4、空标签清除浮动 (IE6 最小高度 19px；（解决后IE6下还有2px偏差）)
5、.br清浮动 (不符合工作中：结构、样式、行为，三者分离的要求)

即添加下面这条语句在里面的div后面：<br clear="all" />

二、目前常用的三种清浮动方法，也是比较有效的方法

先抛一块问题砖（display： block）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            border: 1px solid #ccc;
            background: #c2ffe3;
            color: #fff;
            margin: 50px auto;
            padding: 50px;
        }
        .div1{
            width: 80px;
            height: 80px;
            background: red;
            float: left;
        }
        .div2{
            width: 80px;
            height: 80px;
            background: blue;
            float: left;
        }
        .div3{
            width: 80px;
            height: 80px;
            background: sienna;
            float: left;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>
</body>
</html>

我们本意是想让三个div靠左显示，并且是在第一个div中，但是现在的效果是边框没有被撑开，margin值不能正常显示。所以可以采用以下几种方法进行解决。

1、添加新的元素、应用 clear：both；

html：

<div class="box">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="clear"></div>
</div>

css:

.clear{clear:both; height: 0; line-height: 0; font-size: 0}

2、父级div定义 overflow: auto/hidden（注意：是父级div也就是这里的 div.box）

        .box{
            border: 1px solid #ccc;
            background: #c2ffe3;
            color: #fff;
            margin: 50px auto;
            padding: 50px;
            overflow: auto;
            zoom: 1;//zoom 兼容IE6 IE7，处理兼容性问题
        }

原理：使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值，如果使用这个值将无法达到清除浮动效果，其他两个值都可以，其区别据说在于一个对seo比较友好，另个hidden对seo不是太友好。

3、据说是现在主流的方法 :after 方法：（注意：作用于浮动元素的父亲）
原理：这种方法清除浮动是现在网上最拉风的一种清除浮动，他就是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而box利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。

html:

<div class="box clearfix">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>

css：

.clearfix{
		*zoom:1;
	}
.clearfix:after{
		content: "";
		display: block;
		clear: both;
	}

1）after伪类：元素内部末尾添加内容；
:after{content"添加的内容";} IE6，7下不兼容
2）zoom 缩放
a、触发 IE下 haslayout，使元素根据自身内容计算宽高。
b、FF 不支持；

其中clear:both;指清除所有浮动；content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。

最终的效果图：

Wendy-lxq

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
HTML5高级之css清除float浮动

我们先来回忆一下float的特征： 1）块在一排显示 2）内联支持宽高 3）默认内容撑开宽度 4）脱离文档流 5）提升层级半层由于float浮动脱离文档流，那么就很容易产生各种兼容性和由于浮动产生的视觉效果上的差别。接下来我们分析几种主要的解决方法。大家最熟悉的方法应该就是添加空标签，然后利用clear
复制链接

扫一扫

专栏目录