【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 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...
随机推荐
- spark快速开发之scala基础之1 数据类型与容器
写在前面 面向java开发者.实际上,具有java基础学习scala是很容易.java也可以开发spark,并不比scala开发的spark程序慢.但学习scala可有助于更快更好的理解spark.比 ...
- 187. Repeated DNA Sequences (String; Bit)
All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: "ACG ...
- Shell教程 之传递参数
1.Shell传递参数 我们可以在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为:$n.n 代表一个数字, 0 为执行的文件名,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数 ...
- python之语音识别（speech模块）
1.原理 语音操控分为 语音识别和语音朗读两部分. 这两部分本来是需要自然语言处理技能相关知识以及一系列极其复杂的算法才能搞定,可是这篇文章将会跳过此处,如果你只是对算法和自然语言学感兴趣的话,就只有 ...
- shape 图形
主要属性: <?xml version="1.0"encoding="utf-8"?><shape > <corners /> ...
- bootstrap-table 使用遇到的问题总结
问题一:右上角button样式自定义 方法: //修改bootstrap-table右上角按钮样式 $(".table-box .columns-right button").re ...
- git log的用法
git log 查看 提交历史默认不用任何参数的话,git log 会按提交时间列出所有的更新,最近的更新排在最上面. git log --graph --pretty=format:'%Cred%h ...
- Volley超时重试机制
基础用法 Volley为开发者提供了可配置的超时重试机制,我们在使用时只需要为我们的Request设置自定义的RetryPolicy即可. 参考设置代码如下: int DEFAULT_TIMEOUT_ ...
- go语言net包rpc远程调用的使用
一.基于http的RPC 服务端: package main; import ( "net/rpc" "net/http" "log" ) ...
- 关于transform-style:preserve-3d的些许明了
父元素要添加属性transform-style:preserve-3d;和transform:perspective(800px);还有相对定位 首先设置子元素 具有3D属性,然后再设置视角与3D元素 ...