关于CSS样式清除浮动的总结

浮动的元素之间是互相贴靠的。但是在实际的工作中，我们是希望同组的元素互相贴靠的，但是不同组的元素之间是不互相贴靠的。第二组的元素不应该与第一组的元素有任何互相的影响。

比如，我们想要的效果是这样的：

但是如果浮动没有清除的话，就会变成这样：

清除浮动有四种方式，一般常选用后两种，根据不同的情况进行选择。

1）加高法：

浮动的元素，只能被有高的盒子关住。但是，工作上绝不会给所有的盒子都加高度，因为这样很麻烦，而且没法适应页面的快速变化。

2）clear：both

最简单的清除浮动的方法，就是给盒子加clear：both，表示自己的内部元素，不受其他元素的影响。但是有个问题，就是margin失效了。

但是盒子中的浮动元素的margin属性并没有失效（个人尝试）。

3）隔墙法：（新浪的前端大部分采用的是这种方式）

在两部分浮动元素之间，建一个墙，隔开两部分浮动（注意是在两个包含浮动元素的盒子中间）。墙要加clear：both属性。用墙自己本身的高度作为两个盒子之间的间隙。

内墙法：将墙放在浮动元素所在的盒子里。与外墙法不同的是，内墙法使得盒子被撑起了高度。第一个图是用外墙法，div盒子的高度。第二张图是用内墙法，div盒子的高度（这个高度是div里所有元素的高度之和，比如里面有两个li标签，每一个li的高度是30px，内墙的高度是10px，那么div盒子的高度就是30+10=40px，因为li元素是浮动的，两个li元素是并排的，所以几个li元素的高都是30px）。

代码部分：（style中的css样式部分是一样的，就是墙的位置是不同的）

效果图也是一样的：

4）overflow:hidden

这个属性的本意是将所有溢出盒子的内容隐藏掉。但是，这个属性可以用于清除浮动。

一个父元素，是不能被自己浮动的子元素撑出高度的。但是，如果给这个父元素加上了overflow：hidden；那么这个父元素就能够被浮动的儿子撑出高度了。

总结：在不同的情景下，应该要选择不同的方式。比较大的结构可以用隔墙法，比较小的结构部分可以用第四种。

例子：要做如下结构的界面。

公告的内容是左浮动的，日期是右浮动的。

对于这种情况，应该用第四种方式去实现。用隔墙法的话不适用。因为在ul标签中只能有li标签，不能在两个li标签之间加入div标签作为墙。而如果在两个li标签之间加li标签作为墙的话，就浪费了语义。如果采用内墙法的话，在li标签内加div标签作为墙的话，就有点兴师动众。所以这个例子采用第四种方式最好，既简单，又使结构很清晰。实现效果图：

下图1是body部分，图2是css样式部分

在li标签中添加了overflow：hidden后，就不会出现堆在一起的情况了。注意，overflow:hidden在这个例子中要添加在li标签中。因为在这个例子中，是以li标签作为组的划分的，而不是div标签。如果将overflow:hidden添加在div标签的样式中，则还是会堆在一起。所以，找到用于划分组的标签很重要。

转载于:https://www.cnblogs.com/cuishuyao/p/6525081.html

关于CSS样式清除浮动的总结相关推荐

CSS样式 float浮动用法
CSS样式 float浮动用法前言 Css样式的float浮动属性,用于设置标签对象(如:<div>标签盒子.<span>标签.<a>标签.<em>标 ...
CSS——如何清除浮动
众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div. ...
清除浮动最有效的css写法,清除浮动最有效的css写法
说起来呢,基本上只要你给容器div加了float的属性,就需要清除浮动来使页面显示正常,那么,到底有什么方法可以让浮动轻松清除呢? 可以用display:flex;替代,但是它对IE8,9支持不是很好 ...
【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )
文章目录一.清除浮动 - 使用 after 伪元素 ( 最流行写法 ) 1.额外标签法和 overflow 样式法弊端 2.after 伪元素清除浮动简介 3.after 伪元素清除浮动核心代码 ...
CSS为何清除浮动以及清除浮动方法总结
文章目录一,浮动布局的注意点二,为什么需要清除浮动? 三,清除浮动的本质四,清除浮动的方法 1. 额外标签法(隔墙法) 2.父元素overflow 3.after伪元素清除 4.双伪元素清除浮动 ...
css如何清除浮动（二）
2019独角兽企业重金招聘Python工程师标准>>> 在上篇介绍通过设置祖先元素的高度类清除浮动,但在实际的网站开发中,很少会设置元素的高度,那这是为什么呢? 是因为元素一般都能被 ...
一天搞定CSS：清除浮动（float）--13
上一节已经说明了为什么要清除浮动了.这里我们就来解决浮动产生的各种问题. 为什么要清楚浮动? 地址:http://blog.csdn.net/baidu_37107022/article/detail ...
CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div ...
html清除js设置的浮动,css 怎么清除浮动
而此段时间最烦的是森林群里面的一群人每天上班都在吵,然后我就每次都装嫩的在里面问:"各位高手,劳烦请问一下:清除浮动怎么弄?" 清除浮动一个凡是做页面的人都会遇到的一个东西,但是是 ...

关于CSS样式清除浮动的总结

关于CSS样式清除浮动的总结相关推荐

最新文章

热门文章