清除浮动的方法

1984人阅读

问：为什么要清楚浮动呢？

答：由于浮动元素会脱离原来的文档流，不占用页面的空间，导致父元素因为子元素的浮动引起内部高度为0的情况，导致页面显示不正常。

用个例子展示一下

首先，这是没有使用浮动的情况：，父元素没有设置宽高，但是被子元素的高撑起来了，至于宽的话，我们知道，div是属于块级元素，默认占一行。

然后，我们先给小子元素添加浮动，让其脱离文本流，观察父元素的变化。这时候我们观察到，当小子元素脱离了文本流之后，父元素自是根据大子元素（未脱离文本流）的高度进行变化。

最后，我们在将大小两个子元素都设置浮动属性，观察他的效果，得到的就是父元素没有了高的属性，在页面中我们见到的高属性其实就是所给的边框加起来的4px。同时，脱离文档流之后，两个子元素排在了一起。这主要就是浮动的内容了。

也就是说，当父元素不给高度的时候，在子元素不浮动的情况下，父元素会被子元素撑开，但是，一旦子元素浮动，父元素的高度就会相应地变化，直到当所有的子元素都浮动的时候，父元素也就仅剩下自己的边框属性。

问：出现这种问题，我们应该怎么解决呢？

1.标签法

通过在浮动元素之后添加标签的方式，设置 clear:both 实现。
在使用上会比较方便，但是添加了没有意义的标签。
不推荐使用

2.父级添加属性

通过父级元素添加overflow:hidden属性实现清除浮动

3.伪元素清除

通过使用伪元素after清除浮动，由于伪元素是行内元素，将其转换成块元素，设置高度为0。有点类似于标签法的思想，但是通过伪元素实现。

使用双伪元素清除浮动

通过使用before和after双伪元素实现清除浮动

这就是我总结的大致的四种清除浮动的方式了，最近写页面的时候经常碰到浮动没有清楚的问题。谨以此，督促自己好好写页面哈哈哈。

csshtml5

来自专栏

CSS

 「已注销」 2篇文章  0人订阅

发布于2020-10-10著作权归作者所有

相关推荐更多

清除浮动的几种方法

weixin_30455661 92 阅读  0 评论

清除浮动的4种方式

殘血★戰狼王 89 阅读  0 评论

CSS清除浮动（float）的三种方式

羽行 383 阅读  0 评论

最新发布 CSS浮动及去除浮动

yen_zz 784 阅读  0 评论

清除浮动的方法

Matcha_ice_cream 892 阅读  0 评论

2020-10-23

00后程序猿 65 阅读  0 评论

清除浮动的最常用的四种方法_Youser511的博客

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/content:"";display:block;height:0;clear:both;visibility:hidden;}.clearfix{*zoom:1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/}bigsmall<!

清除浮动的四种方式及其原理_FL_csdn1的博客_清除浮动

什么是浮动,浮动给我们造成了什么困扰,我们该使用什么方式来解决它。下面会介绍到为什么要清除浮动以及清除浮动的四种方式。 一、为什么要清除浮动 在我们的开发过程中,浮动元素是css中最常用的属性,浮动起来的元素会脱离标准流,如果我们的...

清除浮动最常用的四种方法_即将秃头的小飞的博客-CSDN...

清除浮动最常用的四种方法 1、为什么要清除浮动 开发过程中,浮动是需要掌握的一个技能,页面布局当中,在无法确定子元素的高度(height)时,我们无法给父级标签一个固定的高度(height),我们想要的是,由子元素的高度去控制父元素的高度。

清除浮动的4种方法_大风刮来的的博客_清除浮动的四种方法

1.为什么清除浮动   有的内容多且相同的板块,这种情况下设置高度是不现实的。例如淘宝,京东的商品推荐页面。使用浮动该内容就会按顺序排列,不需要再设置高度了。   浮动本质是让元素浮在盒子上面,装浮动的盒子目的就是给浮动...

清除浮动的4种方式_小白菜生长记的博客

3.使用after伪元素清除浮动::after方式为空元素的升级版,好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after,zoom(IE专有属性)可解决ie6,ie7浮动问题(较常用推荐) 优点:符合闭合浮动的思想,结构语义化正确,不容易出现怪问题...

清除浮动的四种常见方式_落栀枫羽的博客_div取消浮动

清除浮动的四种常见方式 为什么要去除浮动? 蓝色的div块因为浮动脱离文档流而挡住了红色div的显示,因此我们需要去除浮动让红色div块显示在蓝色div块下面 .box1{ width: 200px; height: 200px; background-color: blue; float: left;...

清除浮动的五种方法详解

忆弥 5874 阅读  0 评论

热门推荐 清除浮动的最常用的四种方法，以及优缺点

h_qingyi 25万+ 阅读  37 评论

清除浮动的四种方法

wind-hm 1254 阅读  0 评论