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 ...
随机推荐
- 《深入PHP：面向对象、模式与实践》（一）
第1章 PHP:设计与管理 本章主要介绍了本书有哪些内容. 第2章 PHP与对象 本章总结了PHP面向对象特性的发展过程,逐步介绍对象的概念. PHP/FI:支持变量.关联数组和函数.没有对象. ...
- ios 自动布局水平跟垂直居中
[view addConstraint:[NSLayoutConstraint constraintWithItem:segment attribute:NSLayoutAttributeCenter ...
- Linux的Samba服务器
1.samba服务器概述 Samba最先在Linux和windows两平台之间架起一座桥梁,正是由于samba的出现,我们可以在Linux系统和Windows系统之间相互通信,比如拷贝文件,实现不同操 ...
- Failed to add reference to 'System.Net.Http'. Please make sure that it is in the Global Assembly Cache.
关闭VS再来就好了
- Atitit。sql2016标准化的规划方案 v3 q2a
Atitit.sql2016标准化的规划方案 v3 q2a 1. Sql标准化的历史3 1.1. Sql92标准4 1.2. Sql99标准4 1.3. SQL:2003为例,它包括以下9个部分 5 ...
- 【转载】html标签语义化
Html语义化标签-语义化你的HTML标签和属性 1 语义化你的HTML标签和属性 1.1 <Hx> 1.2 <p> 1.3 <ul>.<ol>.& ...
- Boolean 转 string
boolean b=false; String b= String.valueOf(b);
- 解决Eclipse的dropins中svn插件不能加载的问题
在eclipse的dropins中我们将svn的插件放到里边重启我们的ecplise就能正常加载svn插件了,如下图 但是有时候我们删除了svn的项目之后有可能我们的eclipse就不能正常加载svn ...
- UI-1-UI入门
课程要点: 创建一个iOS工程 AppDelegate类 UIKit框架以及UIWindow 在window上添加第一个试图UIView NSTimer(定时器) 创建一个iOS工程 PS:接下来简单 ...
- PHP 7的一些引人注目的新特性简单介绍
1. ?? 运算符(NULL 合并运算符)把这个放在第一个说是因为我觉得它很有用.用法: ? 1 $a = $_GET['a'] ?? 1; 它相当于: ? 1 2 <?php $a = iss ...