CSS如何清除浮动流的多种方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.wrapper{
border: 20px solid black;
}
.content{
float: left;
width: 100px;
height: 100px;
background-color: #bbb;
color: black;
font-size: 50px;
margin-left: 20px;
margin-bottom: 20px;
line-height: 100px;
text-align: center;
}
</style>
<body>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
</div>
</body>
</html>
显示效果如下图
由于方块元素产生了浮动流，所以外面的wrapper无法包裹里面的元素，如何做到清除浮动流，让wrapper包裹里面的元素呢，形成如下图形？下面介绍几种方法。
方法1：在content的最后一个元素后面添加一个块元素（p div ul li ol form address），块元素上添加clear。
不足：虽然能够满足要求，但是由于引入了新的元素（标签）破坏了整体的结构，所以不推荐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.wrapper{
border: 20px solid black;
}
.content{
float: left;
width: 100px;
height: 100px;
background-color: #bbb;
color: black;
font-size: 50px;
margin-left: 20px;
margin-bottom: 20px;
line-height: 100px;
text-align: center;
}
p{
clear: both;
}
</style>
<body>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<p></p>
</div>
</body>
</html>
方法2：利用伪元素清除浮动流
思考：为什么不能利用content上的伪元素清除浮动流。
伪元素after是内容的最后部分，如果利用content伪元素after只能清除content内容的浮动流，无法清除content后的浮动流，所以没法达到目的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.wrapper{
border: 20px solid black;
}
.content{
float: left;
width: 100px;
height: 100px;
background-color: #bbb;
color: black;
font-size: 50px;
margin-left: 20px;
margin-bottom: 20px;
line-height: 100px;
text-align: center;
}
.wrapper::after{
content: "";
clear: both;
display: block;
}
</style>
<body>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
</div>
</body>
</html>
方法3：让wrapper触发BFC，触发BFC的方法有如下三种。
float：left/right
position:absolute;
display:inline-block;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.wrapper{
float: left;
/*position: absolute;*/
/*display: inline-block;*/
border: 20px solid black;
}
.content{
float: left;
width: 100px;
height: 100px;
background-color: #bbb;
color: black;
font-size: 50px;
margin-left: 20px;
margin-bottom: 20px;
line-height: 100px;
text-align: center;
}
</style>
<body>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
</div>
</body>
</html>
CSS如何清除浮动流的多种方案的更多相关文章
- 【css】清除浮动的几种方式
[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...
- HTML&CSS基础-清除浮动
HTML&CSS基础-清除浮动 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看浮动效果 1>.HTML源代码 <!DOCTYPE html> &l ...
- CSS——如何清除浮动
众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div. ...
- CSS中清除浮动的作用以及如何清除浮动
1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动.非固定”的意思.块级元素(div.table.span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观.这就 ...
- 【CSS】清除浮动的五种方式
清除浮动是一件功德无量的事情23333 这里记录一下清除浮动的多种方式 *首先要明确的是,为什么要清除浮动? A 影响其他元素定位 父盒子高度为0,子盒子全部浮动.定位,子盒子不会撑开父盒子,下面的元 ...
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...
- CSS clear清除浮动
1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动 ...
- 关于CSS中清除浮动的方法
在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...
- div+css之清除浮动
当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响. 浮动的清理(clear): 值:none:默认值.允许两边都可以有浮动对象:l ...
随机推荐
- Unity 提取游戏资源之ktx转换
http://blog.csdn.net/akof1314/article/details/38022263 从雨松的博文<Unity3D研究院之mac上从.ipa中提取unity3D游戏资源( ...
- ibatis 动态查询
http://www.iteye.com/topic/393042最近做了很多动态的查询,尤其是排序,以及一些状态字段,所以就做了一个总的动态查询,以不变应万变,呵呵 ibatis 里面的sql代码: ...
- RabbitMQ 学习笔记（一）特点
RabbitMQ 的具体特点 可靠性: RabbitMQ 使用一些机制来保证可靠性, 如持久化.传输确认及发布确认等. 令灵活的路由: 在消息进入队列之前,通过交换器来路由消息.对于典型的路由功能,R ...
- c++ 类内部 使用 new delete
低级错误: /** * @clusterNums 默认为5 分类数目 * @xyVector 处理后点云数据 x y顺序存储 */ int GMM::runGMM(int clusterNums, c ...
- McCabe环路复杂度计算方法
环路复杂度用来定量度量程序的逻辑复杂度.以McCabe方法来表示. 在程序控制流程图中,节点是程序中代码的最小单元,边代表节点间的程序流.一个有e条边和n个节点的流程图F,可以用下述3种方法中的任何一 ...
- 知也atitit.解决struts2 SpringObjectFactory.getClassInstance NullPointerException v2 q31无涯 - I
atitit.解决struts2 SpringObjectFactory.getClassInstance NullPointerExceptionv2 q31 1. #--现象 java.lang. ...
- Atitit. 二进制数据ascii表示法，与base64编码解码api 设计标准化总结java php c#.net
Atitit. 二进制数据ascii表示法,与base64编码解码api 设计标准化总结java php c#.net 1. Base64编码,1 1.1. 子模式 urlsafe Or url u ...
- 文件操作接口的系统调用分析---SYSCALL_DEFINEx
linux/arch/arm/kernel/call.S ... CALL(sys_read) CALL(sys_write) CALL(sys_open) CALL(sys_close) ... ...
- FAT32和NTFS最大支持的单个文件大小分别是多大？
以前,RAID控制器和文件系统都有2TB的限制.控制器上的限制,主要是指每个LUN不能大于2TB,而磁盘组一般则没有这个限制:文件系统的限制主要是指每个分区(partition)不能大于2TB,不过3 ...
- socket demo程序
package cn.example.socket; import java.io.BufferedReader; import java.io.IOException; import java.io ...