CSS清除浮动的方法

我们先看看浮动导致什么样的效果。

正常没有浮动的案例如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>清除浮动的方法</title><style type="text/css">.container{background-color: lightblue;}           </style></head><body><div class="container"><h1>The farthest distance in the world</h1><p>The farthest distance in the world,Is the distance between fish and bird,One is in the sky, another is in the sea</p><p>世界上最遥远的距离,是鱼与飞鸟的距离,一个在天 一个却深潜海底</p></div></body>
</html>

没有浮动的效果图：

给h1和p添加浮动后的案例如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>清除浮动的方法</title><style type="text/css">.container{background-color: lightblue;}   h1,p{float: left;}       </style></head><body><div class="container"><h1>The farthest distance in the world</h1><p>The farthest distance in the world,Is the distance between fish and bird,One is in the sky, another is in the sea</p><p>世界上最遥远的距离,是鱼与飞鸟的距离,一个在天 一个却深潜海底</p></div></body>
</html>

添加浮动后的效果图：

可以看到，对h1和p添加浮动之后，包裹它们的父元素背景颜色没有了，好像不能包裹一样。这就是浮动带来的麻烦，解决的方法有以下几种：

方法一：在包裹浮动元素的父元素中最后加入一个空标签

<div style="clear:both"></div>

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>清除浮动的方法</title><style type="text/css">.container{background-color: lightblue;}           h1,p{float: left;}</style></head><body><div class="container"><h1>The farthest distance in the world</h1><p>The farthest distance in the world,Is the distance between fish and bird,One is in the sky, another is in the sea</p><p>世界上最遥远的距离,是鱼与飞鸟的距离,一个在天 一个却深潜海底</p><div style="clear:both"></div></div></body>
</html>

效果图：

缺点：增加一个无意义的标签，违背结构和表现分离的web标准，如果后期维护中添加很多这样的标签会很不方便

方法二：在包裹浮动元素的父元素的css样式中加入overflow：auto；或者overflow:hidden；

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>清除浮动的方法</title><style type="text/css">.container{overflow: auto;background-color: lightblue;}           h1,p{float: left;}</style></head><body><div class="container"><h1>The farthest distance in the world</h1><p>The farthest distance in the world,Is the distance between fish and bird,One is in the sky, another is in the sea</p><p>世界上最遥远的距离,是鱼与飞鸟的距离,一个在天 一个却深潜海底</p></div></body>
</html>

效果图：

方法三：在包裹浮动元素的父元素的css样式中也设置相应的浮动样式

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>清除浮动的方法</title><style type="text/css">.container{float: left;background-color: lightblue;}           h1,p{float: left;}</style></head><body><div class="container"><h1>The farthest distance in the world</h1><p>The farthest distance in the world,Is the distance between fish and bird,One is in the sky, another is in the sea</p><p>世界上最遥远的距离,是鱼与飞鸟的距离,一个在天 一个却深潜海底</p></div></body>
</html>

效果图：

缺点：不可能让每一层都建立在一个浮动的层中，这会影响页面布局

方法四：在包裹浮动元素的父元素添加一个css样式clearfix。它的属性如下

.clearfix:before,
.clearfix:after{content:" ";display: table;
}.clearfix:after{clear:both;
}

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>清除浮动的方法</title><style type="text/css">.container{background-color: lightblue;}           h1,p{float: left;}.clearfix:before,.clearfix:after{content:" ";display: table;}.clearfix:after{clear:both;}</style></head><body><div class="container clearfix"><h1>The farthest distance in the world</h1><p>The farthest distance in the world,Is the distance between fish and bird,One is in the sky, another is in the sea</p><p>世界上最遥远的距离,是鱼与飞鸟的距离,一个在天 一个却深潜海底</p></div></body>
</html>

效果图：

最后一种方法比较常用。

CSS清除浮动的方法相关推荐

div为空的时候浮动没有效果_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达作者:html中文网 | 编辑:前端妹来源:html.cn/web/css/19613.htm ...
css为什么要用浮动_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达作者:html中文网 | 编辑:前端妹来源:html.cn/web/css/19613.htm ...
css清除浮动的方法及原因
清除浮动的方法及原因为什么要清除浮动清除浮动的方法方法1:为父元素设置高度方法2:在受影响的父元素内部末尾添加块级元素-如div 方法3:伪元素清除法方法4:给父元素设置overflow: ...
web前端css清除浮动的方法总结
方法1:祖先加高法 //不常用,不能适应页面的快速变化如果一个元素要浮动,那么它的祖先元素一定要有高度.有高度的盒子,才能关住浮动. 只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元 ...
CSS 清除浮动的方法
CSS中利用float属性可以使元素脱离文档流浮动到父元素的左侧或者浮动的父元素的右侧,这时如果对元素使用浮动属性,会导致父元素不能被撑开. CSS代码: .wrapper{width: 40em;b ...
CSS清除浮动的方法及原理
为什么清除浮动 1.浮动的缺点: 浮动虽然可以便于页面布局,但同时会产生一些问题,也就是我们常说的"副作用".一个元素设置了浮动(即 float 值为 left, right 或 ...
前端开发面试题—CSS清除浮动的方法
活学活用，CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
css清除浮动无效,css清除浮动的处理方法
根据<精彩绝伦的css> JS Bin .news{ outline:1px solid pink } .col{ float: left; width:33%; outline:1px ...

CSS清除浮动的方法

CSS清除浮动的方法相关推荐

最新文章

热门文章