清除浮动造成的影响的解决方案总结

1、将设置float的元素的父元素也设置float。

　　缺点：很有可能不符合情况要求

2、设置父元素的position为absolute，前提是父元素的父元素并没有设置position：relative。

　　缺点：很有可能不符合情况要求

3、设置父元素的overflow为hidden。

　　尚不知晓，猜测是只能清除浮动带来的父元素塌陷，但无法闭合浮动（待验证）

4、设置父元素的display为inline-block。

　　缺点：可能不符合情况要求。

5、设置父元素的zoom为1。

　　缺点：zoom为IE私有属性

6、浮动元素的下方加入额外的元素<br style="clear:both;" />

　　缺点：增加额外的标签使HTML结构看起来不够简洁

7、使用after伪类（此方法目前应用较广）

some:after{

　　content:".";

　　height:0;

　　visibility:hidden;

　　display:block;

　　clear:both;

}

转载于:https://www.cnblogs.com/charling/p/3360208.html

清除浮动造成的影响的解决方案总结相关推荐

父元素浮动子元素会浮动吗_为什么quot;overflow:hiddenquot;能清除浮动的影响
来源 | https://www.jianshu.com/p/7e04ed3f4bea 我们都知道"overflow:hidden"可以溢出隐藏,即当内容元素的高度大于其包含块的高 ...
触发bfc的html元素,什么是BFC？ CSS 使用伪元素清除浮动的方法
BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting co ...
CSS3 - 清除浮动
一. 目的通过本文,让大家可以明白清除浮动的原理和几种方法,最后得出一种本文认为最好用的方法. 本文也会同步到我的个人网站. 二. 内容简介 1. 引入,还原浮动本来的意义 2. 说明,实际开发中常 ...
详细解读css中的浮动以及清除浮动的方法
对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读: 1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...
清除浮动塌陷的4种经典套路
[自古深情留不住,总是套路得人心.] 这些日子,各个朋友圈随时可以见到这句话的身影.的确人们常说:"多一点真诚,少一点套路.",但是最终现象写实也是那么残酷和无奈. 同样在前端攻城 ...
web前端css清除浮动的方法总结
方法1:祖先加高法 //不常用,不能适应页面的快速变化如果一个元素要浮动,那么它的祖先元素一定要有高度.有高度的盒子,才能关住浮动. 只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元 ...
Web前端，CSS中的浮动、清除浮动
前言持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用早期的作用:图文环绕现在的作用:网页布局 • 场 ...
css清除浮动带来的负面影响
来看一个实验:现在有两个div,div身上没有任何属性.每个div中都有li,这些li都是浮动的. 1 <div> 2 <ul> 3 <li>HTML< ...
css清除浮动的六种方法
css中使用float属性时会造成局部坍塌或者内容上顶以及文字环绕等一系列情况出现. 总结了一共六种方法其中有两种最为常用: 1.height属性给父元素设置固定高度当父元素下的子元素进行了浮动时, ...

清除浮动造成的影响的解决方案总结

清除浮动造成的影响的解决方案总结相关推荐

最新文章

热门文章