CSS中清除浮动的两种方式

　　在CSS中，父元素中的子元素如果使用了float，会导致父元素塌陷，高度为0。

　　对于这种情况，常见的解决方式有两种。

一、增加新的div，应用clear:both属性

html:

1 <div class="father">
2     <div class="div1">1</div>
3     <div class="div2">2</div>
4     <div class="div3">3</div>
5     <div class="clear"></div>
6 </div>

css:

1 .clear {
2     clear:both;
3     height:0;
4 }

二、利用:after来清除浮动

原理：这种方法的原理是利用伪类:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其原理类似第一种方式，但区别在于这种方式是利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。

首先需要给父元素添加一个.clear类

css如下

.clear:before,
.clear:after {content: '';display: table;
}
.clear:after {clear: both;
}
.clear {*zoom: 1; //兼容IE6、IE7
}

转载于:https://www.cnblogs.com/tgxh/p/6135615.html

CSS中清除浮动的两种方式相关推荐

html中清除浮动的几种方式,清除浮动的几种方法-关于CSS清除浮动的几种方法
CSS清除浮动的3种方法,参考: 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素方法2: #test{display:block;zoom:1;overflow ...
css 清除浮动的几种方式
css 清除浮动的几种方式浮动布局和定位布局为css中布局的常用的两种布局方式,而且兼容性会比较好.随着flex的流行,以后会是主流. float布局会脱离文档流,对页面的布局造成影响,比如造成父级 ...
前端css 清除浮动的几种方式
浮动的框可以向左或向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流的块框表现得就像浮动框不存在一样.浮动的块框会漂浮在文档普通流的块框上. 清 ...
CSS—清除浮动的几种方式
什么是浮动? 特性:1--浮动的元素不会占据标准流的空间,但是会影响标准流中的文本的排版.浮动只有左右浮动.2--浮动元素A的位置与上一个元素有关系.如果上一个元素有浮动,则A的顶部与上一个元素顶部对 ...
清除浮动的几种方式，以及各自的优缺点
清除浮动的几种方式,以及各自的优缺点 1.使用空标签清除浮动clear:both. 2.给父级div定义overflow:hidden 3.父级div定义伪类:after和zoom(用于非IE浏览器) ...
清除浮动的四种方式及其原理
前言: 什么是浮动,浮动给我们造成了什么困扰,我们该使用什么方式来解决它.下面会介绍到为什么要清除浮动以及清除浮动的四种方式. 目录: 前言: 一.为什么要清除浮动二.清除浮动的第一种方式---给父 ...
实验四：使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用
贺邦+原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 实验目的: 使用库函数 ...
Java中HashMap遍历的两种方式
第一种: Map map = new HashMap(); Iterator iter = map.entrySet().iterator(); while (iter.hasNext()) { Ma ...
使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用
实验4:使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用姓名:李冬辉学号:20133201 注: 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http ...

CSS中清除浮动的两种方式

CSS中清除浮动的两种方式相关推荐

最新文章

热门文章