【Web】网页清除浮动的方法
网页中，经常用浮动的div来布局，但是会出现父元素因为子元素浮动引起内部高度为0的问题，为了解决这个问题，我们需要清除浮动，下面介绍4中清除浮动的方法。
在CSS中，clear属性用户清除浮动，语法：选择器{ clear: left || right || both; };
方法一：额外标签法
在浮动元素末尾添加一个空的标签，如：<div style="clear: both"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1 {
width: 600px;
background-color: gray;
}
.box2 {
width: 600px;
height: 200px;
background-color: purple;
}
.son1 {
width: 150px;
height: 100px;
background-color: skyblue;
float: left;
}
.son2 {
width: 250px;
height: 100px;
background-color: hotpink;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="son1"></div>
<div class="son2"></div>
<!-- 额外标签法 -->
<div style="clear: both;"></div>
</div>
<div class="box2"> </div>
</body>
</html>
方法二：父级添加overflow属性法
给父级添加overflow属性，触发BFC的方式，可以实现清除浮动效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1 {
width: 600px;
background-color: gray;
overflow: hidden;
}
.box2 {
width: 600px;
height: 200px;
background-color: purple;
}
.son1 {
width: 150px;
height: 100px;
background-color: skyblue;
float: left;
}
.son2 {
width: 250px;
height: 100px;
background-color: hotpink;
float: left;
}
</style>
</head>
<body>
<!-- 父级添加overflow属性法 -->
<div class="box1">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="box2"> </div>
</body>
</html>
方法三：使用after伪元素法
使用:after方式，为第一种方法的升级版。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1 {
width: 600px;
background-color: gray;
}
.box2 {
width: 600px;
height: 200px;
background-color: purple;
}
.son1 {
width: 150px;
height: 100px;
background-color: skyblue;
float: left;
}
.son2 {
width: 250px;
height: 100px;
background-color: hotpink;
float: left;
}
.clearfix:after {
content: "."; /*内容为小点，尽量加不要空，否则旧版本浏览器有空隙*/
display: block;
height: 0; /*高度为0*/
visibility: hidden;/*隐藏盒子*/
clear:both;/*清除浮动*/
}
.clearfix {
*zoom: 1; /**代表ie6、7能识别的 zoom是ie6、7清除浮动的方法*/
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="box2"> </div>
</body>
</html>
方法四：使用before和after双伪元素法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1 {
width: 600px;
background-color: gray;
}
.box2 {
width: 600px;
height: 200px;
background-color: purple;
}
.son1 {
width: 150px;
height: 100px;
background-color: skyblue;
float: left;
}
.son2 {
width: 250px;
height: 100px;
background-color: hotpink;
float: left;
}
.clearfix:before, .clearfix:after {
content: "";
display: table; /*可以触发BFC BFC可以清除浮动*/
}
.clearfix:after {
clear:both;/*清除浮动*/
}
.clearfix {
*zoom: 1; /**代表ie6、7能识别的 zoom是ie6、7清除浮动的方法*/
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="box2"> </div>
</body>
</html>
【Web】网页清除浮动的方法的更多相关文章
- css清除浮动的方法汇总
这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...
- 彻底理解浮动float CSS浮动详解 清除浮动的方法
我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 ...
- css清除浮动float方法
转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...
- css清除浮动的方法总结
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 we ...
- 详细解读css中的浮动以及清除浮动的方法
对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读: 1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮 ...
- 前端开发CSS清除浮动的方法有哪些？
在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动 ...
- CSS清除浮动float方法总结
使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...
- 关于CSS中清除浮动的方法
在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...
- 8种CSS清除浮动的方法优缺点分析
为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...
随机推荐
- c++:空构造空析构的益处之一
项目开发过程中发现一个问题,有段代码,一个动态库的cpp代码里不包含头文件中类的空构造空析构实现,就会出现编译出的动态库依赖项少了很多.而添加后则多了好几个依赖项.下面看例子: ##a.h class ...
- NumPy IO
NumPy IO Numpy 可以读写磁盘上的文本数据或二进制数据. NumPy 为 ndarray 对象引入了一个简单的文件格式:npy. npy 文件用于存储重建 ndarray 所需的数据.图形 ...
- 《学习OpenCV(中文版)》
<模式识别中文版(希)西奥多里蒂斯> <学习OpenCV(中文版)> 矩阵计算 英文版 第四版 Matrix Computations OpenCV 3.x with Pyth ...
- tight
tight - 必应词典 美[taɪt]英[taɪt] adv.紧紧地:牢固地 adj.牢固的:紧的:不松动的:难解开的 n.紧身衣 网络紧身的:紧密的:密封的 变形比较级:tighter:最高级:t ...
- 最小生成树kruskal模板
算法思路:每次选取权值最小的边,判断这两个点是否在同一个集合内,如果在则跳过,如果不在则加上这条边的权值 可以使用并查集储存结点,可以快速判断结点是否在同一集合内. #include<iostr ...
- scrapy的调试和环境安装技巧
1,先在settings中把ROBOTSTXT_OBEY = False 在主目录下面新建main文件 __autor__ = 'zhouli' __date__ = '2018/11/3 22:39 ...
- jquey中json字符串与json的转换（转）
<!doctype html> <html> <head> <meta charset="utf-8"> <script sr ...
- [leetcode]123. Best Time to Buy and Sell Stock III 最佳炒股时机之三
Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...
- 流(Stream)、文件(File)和IO
读取控制台输入 Java 的控制台输入由 System.in 完成. 为了获得一个绑定到控制台的字符流,你可以把 System.in 包装在一个 BufferedReader 对象中来创建一个字符流. ...
- day 25 udp, socketserver
建立UDP连接的示例: # server端 import socket sk = socket.socket(type=socket.SOCK_DGRAM) sk.bind(('127.0.0.1', ...