清除float浮动的几种方法

2019独角兽企业重金招聘Python工程师标准>>>

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

float主要流行与页面布局，然后没有使用后没有清除浮动，就会后患无穷，下面是清除float的几种方法。

第一种方法：使用空标签清除浮动

<ul >

</ul>

第二种方法：使用overflow属性

此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可!overflow:auto;是让高度自适应，zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决，注意，zoom不符合W3C标准。overflow:hidden也可以实现。

</ul>

第三种方法：使用after伪对象清除浮动

after伪对象非IE浏览器支持，所以并不影响到IE/WIN浏览器。具体写法可参照以下示例。使用中需注意以下几点。

一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；

二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为"."，

visibility:hidden;height:0;} c< class="listinfo">/

</ul>

转载于:https://my.oschina.net/u/1403217/blog/185736

清除float浮动的几种方法相关推荐

CSS:盒子模型和清除float浮动的三种常用方法
目录一:浮动产生原因: 二:浮动产生副作用: 三:浮动解决方法: QUESTION:CSS盒子模型清除浮动? ANSWER: 一:浮动产生原因: 一般浮动是什么情况呢?一般是一个盒子里使用了CSS ...
[Web 前端] 018 css 清除浮动的四种方法
清除浮动的四种方法加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...
CSS清除浮动的四种方法
CSS清除浮动的四种方法第一种:使用div空标签法第二种:父元素使用overflow: hidden 第三种:伪元素选择器:after 第四种:伪元素选择器:before + after 第一种: ...
HTML中清除浮动的几种方法
清除float的常见几种方式: 清除浮动方法(1)在浮动元素后面使用一个空的自身清除浮动的元素. 例如 <div style="clear:both;"></di ...
CSS的浮动及清除浮动的5种方法
浮动是布局的时用到的一种技术,能够方便我们进行布局. 1.浮动的设置:css属性float:left/right/none 左浮动/右浮动/不浮动(默认) 2.浮动的原理:使当前元素脱离普通流,相当于 ...
html清除浮动有几种方法,HTML中清除浮动的几种方法
清除float的常见几种方式: 清除浮动方法(1)在浮动元素后面使用一个空的自身清除浮动的元素. 例如实例:清除容器中子元素的浮动,让父元素塌陷的高度恢复. CSS代码: .content{ wid ...
CSS清除浮动的几种方法
来源 | https://www.html.cn/web/css/19613.html 今天这篇文章给大家介绍一下CSS清除浮动的几种方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮 ...
html中清除浮动的几种方式,清除浮动的几种方法-关于CSS清除浮动的几种方法
CSS清除浮动的3种方法,参考: 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素方法2: #test{display:block;zoom:1;overflow ...
Css 清除浮动的几种方法
Css清除浮动的几种方法 1. 为什么添加浮动 2. 为什么清除浮动 3. 清除浮动 1) 额外标签法 2) 利用 Css 的 overflow; 3) after伪元素清除浮动 4)after.be ...

清除float浮动的几种方法

清除float浮动的几种方法相关推荐

最新文章

热门文章