【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 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...
随机推荐
- Numpy：索引与切片
numpy基本的索引和切片 import numpy as np arr = np.array([1,2,3,555,666,888,10]) arr array([ 1, 2, 3, 555, 66 ...
- spket插件安装并设置JQuery自动提示(转)
spket是一个开发JavaScript.jQuery.Ext_js等的开发工具,它可以 是独立的IDE,也可以作为Eclipse的插件使用,下面介绍如何在Eclipse中安装spket插件: 1.首 ...
- python之列表、元组、字典学习
list特征列表中的元素可以是数字和字符串,列表,布尔值,列表中也可以嵌套列表 a=[1,2,3,"qqq","无"] b=[1,2,3,[1,2,3,&quo ...
- checkbox/radio 样式修改
只改颜色 input[type=radio],input[type=checkbox] { display: inline-block; vertical-align: middle; width: ...
- APIcloud制作APP 微信支付与支付宝支付
首先要在云端绑定相应模块如alipay和wxpay其次编写代码. 配置区域 var cfg = { webName:'',//APP名字 payDebug:true, isUseWxPay:true, ...
- 转：JMeter压力测试及并发量计算
最近的一个项目刚刚开发完,因为不是专业测试人员,所以记录下测试过程以备时间长忘记了. 一.JMeter的安装(Linux)1. 下载JMeter:这个就不细说了,直接去(http://jmeter.a ...
- JQuery UI之Autocomplete(4)多值输入、远程缓存与组合框
1.多值输入 首先加入相关的css和js文件,以及对应的HTML代码如下: <link href="../css/jquery-ui.css" rel="style ...
- dup
dup是一个操作符,由编译器识别处理,和db.dw.dd等数据定义伪指令配合使用,用来进行数据的重复. 例如 db 3 dup (0) 定义了3个字节,它们的值都是0,相当于db 0,0,0 db ...
- JSP使用sessionScope获取session值
场景:有些实体对象可以放到HttpSession对象中,保正在一个会话期间可以随时获取这个对象的属性,例如可以将登录用户的信息写入session,以保证页面随时可以获取并显示这个用户的状态信息.下面以 ...
- 微信小程序 wxml中的属性记录
1. view 标签中的属性 style 中的参数 margin-top:10px; (向上距离) display : flex; (display : flex 容器声明) flex-direc ...