CSS中若是实现元素浮动和清除浮动，看这篇文章就足够了
浮动基本介绍
- 在标准文档流中元素分为2种，
块级元素和行内元素，若是想让一些元素既要有块级元素的特色也同时保留行内元素特色，只能让这些元素脱离标准文档流便可。 - 浮动可让元素脱离标准文档流，能够实现让多个元素排在同一行，而且能够设置宽高度。
- 其实浮动是经过
float属性来实现的。 float属性值说明表：
| 属性值 | 描述 |
|---|---|
| left | 设置元素向左浮动。 |
| right | 设置元素向右浮动。 |
右浮动实践
- 让咱们进入右浮动的实践，实践内容如：将
class属性值为.box1元素设置为右浮动。 - 在进入有浮动实践以前咱们先看看要浮动元素结构是什么。
-
代码块html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
-
结果图布局
- 为何结果图是一条边框线呢？由于在
div标签中尚未内容呢，如今咱们将子div标签设置宽高度为100px像素而且添加背景颜色。 -
代码块ui
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
-
结果图spa
- 为何会排列为3行呢，由于3个
div标签都是块级元素。 - 如今咱们将
class属性值为.box1的元素设置为右浮动。 -
代码块code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float:right;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
-
结果图htm
-
注意：如今咱们发现
calss属性值为.box元素高度变矮了，这就说明了（浮动元素它已经脱离了标准文档流，再也不占用空间了）、而且向右浮动，浮动到自身的父元素的边缘位置就中止了浮动。blog
左浮动实践
- 让咱们进入左浮动的实践，实践内容如：将
class属性值为.box1元素设置为左浮动。 -
代码块文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float:left;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
-
结果图it
- 咱们先理解浮动的原理以后再解释下
class属性值为.box2元素看不见的缘由。 - 如今笔者给你们看2张实践结果图如：
-
结果图Atable
-
结果图B
- 经过这2张结果图咱们能够把浮动简单的理解为“漂”举例：
- 假设
class属性值为.box是一个池塘，3个子元素都是可以漂浮在池塘水面上的东西，如今咱们将calss属性值为.box1元素浮动起来，漂在池塘水面上，是否是就再也不占用池塘内的空间了。 - 既然咱们理解为“漂”它必定是漂浮在池塘水面之上，可是没有浮动的元素在池塘水面以内，因此
class属性值为.box2元素看不见，并不表明它不存在只是被class属性值为.box1元素给遮挡住了，如今咱们将class属性值为.box2元素宽度设置为150px像素。 -
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float:left;
}
.box2{
width: 150px;
height: 100px;
background-color: #0f0;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
-
结果图
-
注意：事实证实
class属性值为.box2元素是存在的。 - 下面咱们将
calss属性值为.box2元素设置为左浮动看看有什么不同的效果 -
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float:left;
}
.box2{
width: 150px;
height: 100px;
background-color: #0f0;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
-
结果图
- 可是
class属性值为.box2的元素左浮动并无左浮动到自己父元素的边缘位置，为何在class属性值为.box1后面呢？由于父元素已经有了浮动的子元素后面的子元素在浮动就浮动到前面浮动的元素以后。 - 如今咱们将
class属性值为.box3的元素设置为左浮动，看看有什么不同的效果。 -
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float:left;
}
.box2{
width: 150px;
height: 100px;
background-color: #0f0;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
-
结果图
-
注意：浮动元素浮动之后，其父元素再也不将浮动的子元素包裹在父元素以内，因此结果图出现一条黑色的边框线，如有不明白的看第一个实践内容。
将行内元素设置浮动
- 若是咱们给行内元素设置了浮动，行内元素就拥有了块级元素的特色。
- 让咱们进入行内元素设置浮动实践，实践内容如：将
div标签中的span标签设置为左浮动。 - 在设置左浮动以前咱们先看看给
span标签设置宽高度和背景颜色有什么效果。 -
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="box">
<span class="box1">微笑是最初的信仰1</span>
<span class="box2">微笑是最初的信仰2</span>
<span class="box3">微笑是最初的信仰3</span>
</div>
</body>
</html>
-
结果图
- 如今发现咱们给
span标签设置了宽高度为100px像素并无生效，由于如今span标签仍是行内元素。 - 如今咱们给
span标签设置左浮动，而后咱们在看看效果如何。 -
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
float: left;
}
</style>
</head>
<body>
<div class="box">
<span class="box1">微笑是最初的信仰1</span>
<span class="box2">微笑是最初的信仰2</span>
<span class="box3">微笑是最初的信仰</span>
</div>
</body>
</html>
-
结果图
-
注意：行内元素设置为浮动以后就拥有了块级元素的特色。
设置浮动总结
- 浮动的特色如：
- 浮动元素脱离了标准的文档流，再也不占用父元素的任何空间。
- 浮动元素比标准文档流的元素层级要高，会将标准文档流的元素遮挡住。
- 浮动元素会向左浮动或向右浮动。
- 浮动元素会遇到父元素的边缘就中止了浮动。
- 浮动元素会遇到已经有了浮动的元素，后者会浮动到前者以后就中止了浮动。
- 浮动元素浮动以后就脱离了父元素，而且父元素再也不包裹浮动的元素。
- 行内元素设置为浮动，就拥有了块级元素的特色。
为何要清除浮动呢？
- 由于浮动的元素会影响到下面元素，具体看实践结果图你们就明白了。
class属性值为.box元素的子类元素没有浮动前的效果实践。-
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除浮动</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<h1>清除浮动</h1>
</body>
</html>
-
结果图
class属性值为.box元素的子元素左浮动以后影响到下面的元素排版布局实践。-
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<h1>清除浮动</h1>
</body>
</html>
-
结果图
-
如今你们应该明白了为何要清除浮动了，有浮动就必须清除浮动，由于上面的元素设置了浮动就会影响到下面元素排版布局。
清除浮动有3种方式
第一种方式
- 给浮动的元素父元素设置一个固定的高度，从视觉上看到浮动的元素在父元素包裹以内。
- 咱们给浮动元素的父元素设置一个固定
600px像素的高度，一块儿来看看效果如何。 -
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除浮动</title>
<style>
.box{
width: 600px;
height: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<h1>清除浮动</h1>
</body>
</html>
-
结果图
-
这样是解决了下面元素排版布局问题，可是笔者不推荐这么作，由于高度是由子元素的内容撑起来的高度，而不是咱们给的固定高度。
第二种方式
- 其实在
CSS中也有清除浮动的属性，清除浮动属性名为clear。 clear属性值说明表
| 属性值 | 描述 |
|---|---|
| left | 清除左侧浮动元素。 |
| right | 清除右侧浮动元素。 |
| both | 清除左右侧浮动元素。 |
- 要使用这个
clear属性必须建立一个新的div元素，建立新的div元素不能放置任何内容，它只能作一个件事情，那就是清除浮动而且将这个新建立的div元素放在最后一个浮动元素的后面才会生效。 - 左右清除浮动的属性值笔者在这里就不一一实践了，通常咱们就用
both属性值就能够了，左右清除浮动，干吗还要计较它是左浮动或右浮动呢，直接清除左右浮动就ok了。 - 具体的看咱们实践的结果图。
-
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除浮动</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
float: left;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="clear"></div>
</div>
<h1>清除浮动</h1>
</body>
</html>
-
结果图
-
注意：这才是咱们真正想要的结果，而且从视觉上来看浮动的元素包裹在父元素以内的效果。
第三种方式
- 使用属性为
overflow而且属性值为hidden来清除浮动，必须将这个属性设置在浮动元素的父元素身上。 给你们普及下属性为
overflow而且属性值为hidden，它原意是用来将溢出的部份内容进行隐藏，可是它还能够清除浮动。- 笔者先将内容溢出而后在隐藏溢出的内容，那咱们一块儿来看看呗。
-
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>溢出内容进行隐藏</title>
<style>
div{
width: 100px;
height: 50px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div>
微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
</div>
</body>
</html>
-
结果图
- 下面笔者将溢出的内容进行隐藏。
-
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>溢出内容进行隐藏</title>
<style>
div{
width: 100px;
height: 50px;
border: 1px solid #000;
overflow: hidden;
}
</style>
</head>
<body>
<div>
微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
</div>
</body>
</html>
-
结果图
- 使用属性为
overflow而且属性值为hidden来清除浮动。 - 清除浮动以前咱们先看看结构是如何的。
-
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除浮动</title>
<style>
ul{
list-style: none;
}
ul li{
float: left;
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>微笑是最初的信仰1</li>
<li>微笑是最初的信仰2</li>
<li>微笑是最初的信仰3</li>
<li>微笑是最初的信仰4</li>
<li>微笑是最初的信仰5</li>
<li>微笑是最初的信仰6</li>
<li>微笑是最初的信仰7</li>
<li>微笑是最初的信仰8</li>
</ul>
</body>
</html>
-
结果图
-
注意：在这里笔者尚未给浮动元素清除浮动呢，你们能够明显的看到
ul标签高度为0。 - 清除浮动实践
-
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除浮动</title>
<style>
ul{
list-style: none;
overflow: hidden;
}
ul li{
float: left;
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>微笑是最初的信仰1</li>
<li>微笑是最初的信仰2</li>
<li>微笑是最初的信仰3</li>
<li>微笑是最初的信仰4</li>
<li>微笑是最初的信仰5</li>
<li>微笑是最初的信仰6</li>
<li>微笑是最初的信仰7</li>
<li>微笑是最初的信仰8</li>
</ul>
</body>
</html>
-
结果图
-
如今咱们很清楚的看到
ul标签高度为23px像素，为何要使用：属性为overflow而且属性值为hidden来清除浮动，由于ul标签中只能使用li标签元素不能使用其它元素，因此属性为overflow而且属性值为hidden来清除浮动是最好不过啦。
相关文章
- 1. CSS中若是实现元素浮动，看这篇文章就足够了
- 2. CSS：父子元素浮动分析和清除浮动
- 3. css 浮动 清除浮动
- 4. CSS清除浮动_清除float浮动
- 5. 伪元素清除浮动
- 6. CSS定位元素--浮动与清除
- 7. css 浮动和清除浮动
- 8. CSS 浮动和清除浮动
- 9. CSS中浮动与浮动清除
- 10. 20180228:CSS浮动元素与清除浮动的一点理解
- 更多相关文章...
- • ionic 浮动框 - ionic 教程
- • W3C CSS 活动 - W3C 教程
- • 三篇文章了解 TiDB 技术内幕——说存储
- • 三篇文章了解 TiDB 技术内幕 —— 说计算
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Window下Ribbit MQ安装
- 2. Linux下Redis安装及集群搭建
- 3. shiny搭建网站填坑战略
- 4. Mysql8.0.22安装与配置详细教程
- 5. Hadoop安装及配置
- 6. Python爬虫初学笔记
- 7. 部署LVS-Keepalived高可用集群
- 8. keepalived+mysql高可用集群
- 9. jenkins 公钥配置
- 10. HA实用详解
欢迎关注本站公众号,获取更多信息
相关文章
- 1. CSS中若是实现元素浮动，看这篇文章就足够了
- 2. CSS：父子元素浮动分析和清除浮动
- 3. css 浮动 清除浮动
- 4. CSS清除浮动_清除float浮动
- 5. 伪元素清除浮动
- 6. CSS定位元素--浮动与清除
- 7. css 浮动和清除浮动
- 8. CSS 浮动和清除浮动
- 9. CSS中浮动与浮动清除
- 10. 20180228:CSS浮动元素与清除浮动的一点理解