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 ...
随机推荐
- Python——Socket 编程教程
这是用来快速学习 Python Socket 套接字编程的指南和教程.Python 的 Socket 编程跟 C 语言很像. Python 官方关于 Socket 的函数请看 http://docs. ...
- 【BIEE】18_时间序列函数的使用
三个时间序列函数 AGO: 实现同环比 TO DATE:实现累计指标,如MTD月累计.YTD年累计 Period Rolling:当前时间的x个时间单位开始到y个时间单位结束这一时段内的度量总和 BI ...
- Android 自己定义控件开发入门（二）
上一次我们讲了一堆实现自己定义控件的理论基础.列举了View类一些能够重写的方法,我们对这些方法的重写是我们继承View类来派生自己定义控件的关键 我通过一个最简单的样例给大家展示了这一个过程,不管是 ...
- linux 单机跨进程通信
一般来说通过网络通信(比如tcp,udp)或者共享内存的方式肯定可以实现跨进程通信,但现在这里要说的是比较偏但实用的几个方法:利用unix域通信(普通网络连接),利用unix域通信(socketpai ...
- weka入门
每天都必须记录自己的一点一滴,不记录下来,过一段时间就会忘记,忘记了就等于没有经历过. 我不能每天这样浑浑噩噩的过下去.我要有计划,有梦想.追求卓越.成就不同. 我今天開始我的学习weka之路.学的时 ...
- linux 自启动
使用chkconfig命令可以查看在不同启动级别下课自动启动的服务(或是程序),命令格式如下:chkconfig --list可能输出如下:openvpn 0:关闭 1:开启 ...... 6:关闭 ...
- web 图片上传实现本地预览
在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传 ...
- 使用NGINX反向代理做小偷站
用Nginx的反向代理可以轻松山寨对方的网站,但是反向代理后的网站还是有对方的绝对链接时,怎么办?所以要用替换链接方法. 1 使用官方的的模块 编译参数–with-http_sub_moduleub_ ...
- c++ 宏 #val 在unicode下的使用。
#define CHECK(condition) cout<<check failed:<<#condition<<endl; 上面这句宏,当你 CHECK(myf ...
- script 标签里的 async 和 defer
无 async 和 defer 浏览器立即加载并执行指定脚本(读到即加载并执行),阻塞文档解析 async 脚本的加载执行和文档的加载渲染 并行. defer 脚本的加载和文档的加载渲染并行,但脚本的 ...