目录
一、认识浮动
![](https://i-blog.csdnimg.cn/blog_migrate/f48352c107c96e569638268e8040aae5.png)
二、浮动规则一
![](https://i-blog.csdnimg.cn/blog_migrate/2be175fd5732a101c6127c9a462ace84.png)
三、浮动规则二
![](https://i-blog.csdnimg.cn/blog_migrate/cd7bfbc9719fd270b53cb9a33b66a3a3.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
overflow: 0;
}
.box {
width: 200px;
height: 200px;
background-color: orange;
margin: 0 auto;
padding: 10px;
}
.item1, .item2 {
background-color: #f00;
}
.item1 {
/* 定位脱离标准流 */
/* position: fixed;
left: 0;
top: 10px; */
/* 脱离标准流 */
float: left;
background-color: #0f0;
}
.item2 {
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="item1">1</div>
<div class="item2">2</div>
</div>
</body>
</html>
四、浮动规则三
![](https://i-blog.csdnimg.cn/blog_migrate/2ea1219ff0a8380895dd7c49256012bd.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 500px;
height: 500px;
background-color: orange;
}
.item {
background-color: #f00;
width: 100px;
height: 100px;
/* 三个全部向左浮动: 都会脱离标准流 */
/* float: left; */
}
.box1 {
float: left;
background-color: #0f0;
margin-left: 20px;
}
.box2 {
float: left;
}
.box3 {
float: left;
}
.box4 {
width: 200px;
height: 100px;
background-color: purple;
float: left;
}
</style>
</head>
<body>
<!-- 浮动元素之间不能层叠 -->
<div class="container">
<div class="item box1">1</div>
<div class="item box2">2</div>
<div class="item box3">3</div>
<div class="item box4">4</div>
</div>
</body>
</html>
五、浮动规则四
![](https://i-blog.csdnimg.cn/blog_migrate/053cf77a076d637a02095caf09e444a1.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 1000px;
height: 400px;
background-color: orange;
}
.box strong {
float: left;
/* position: fixed;
left: 0; */
}
</style>
</head>
<body>
<div class="box">
<span>我是span元素</span>
<strong>我是strong元素</strong>
<i>我也是i元素</i>
<div>我是普通的内容</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 500px;
background: orange;
}
.box img {
width: 300px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/kobe01.jpg" alt="">
马俊宝从小热爱摄影,人生中第一部照相机是1978年买的海鸥相机,当时花了他将近半年的积蓄。从拿着相机的那一刻起,他就有一个梦想:把新疆最美的风景记录下来,让更多人看到。这个梦想在他年过半百的时候终于实现了。他的作品经常有爆款,不少视频有上亿观看量。留言里很多人赞叹新疆太美了,也有人不相信这些湖泊草原在新疆。马俊宝很开心:“我想做新疆美景的展示者,把新疆最美的一面展现给大家。”
为了拍美食,张振新几乎跑遍了全疆,短视频的题材有大家熟悉的,也有粉丝留言推荐的,还有在网上搜索看到的。他会为了拍一种美食,乘飞机转汽车,辗转上千公里。从北疆的糖洋芋、土鸡焖饼子,再到南疆的鸽子汤、烤鱼、烤鸽子,每到一地,张振新都会和当地人聊天,听听当地人会去哪家老字号。他拍的店大多虽不起眼,但都是味道正宗、历久弥新的“宝藏店”。
</div>
</body>
</html>
六、浮动规则五
![](https://i-blog.csdnimg.cn/blog_migrate/54612e897c59b729a139cd5b6e3feffd.png)
七、浮动练习一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
/* font-size: 0; */
/* display: flex; */
}
span {
background-color: orange;
/* font-size: 16px; */
/* float: left;
margin-right: 5px; */
}
</style>
</head>
<body>
<!--
将多个行内级元素中间的空格(间隙)去除的方法
1. 删除换行符(不推荐)
2. 将父级元素的font-size设置为0, 但是需要子元素设置回来
3. 通过子元素(span)统一向一个方向浮动即可
4. flex布局(还没有学习)
-->
<div class="box">
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 样式的重置 */
ul, li {
list-style: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #333;
}
/* 全局设置 */
body {
background-color: #f2f2f2;
}
/* 内容样式 */
ul > li {
float: left;
margin-left: 12px;
}
ul > li > a {
display: inline-block;
width: 36px;
height: 36px;
text-align: center;
line-height: 36px;
border-radius: 6px;
background-color: #fff;
color: #3951b3;
font-size: 14px;
}
ul > li > a:hover, ul > li.active > a {
background-color: blue;
color: #fff;
}
ul > li.next > a {
width: 80px;
}
</style>
</head>
<body>
<!-- 结构: HTML -->
<ul>
<li class="item"><a href="#">1</a></li>
<li class="item"><a href="#">2</a></li>
<li class="item"><a href="#">3</a></li>
<li class="item"><a href="#">4</a></li>
<li class="item active"><a href="#">5</a></li>
<li class="item"><a href="#">6</a></li>
<li class="item"><a href="#">7</a></li>
<li class="item"><a href="#">8</a></li>
<li class="item"><a href="#">9</a></li>
<li class="item"><a href="#">10</a></li>
<li class="item next"><a href="#">下一页 ></a></li>
</ul>
</body>
</html>
八、浮动练习二
![](https://i-blog.csdnimg.cn/blog_migrate/c798842914eb37aae7901e8fc4083a55.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 公共的class */
.content {
width: 1190px;
margin: 0 auto;
background-color: orange;
height: 800px;
}
/* 布局样式 */
.box {
/* margin: 0 -5px; */
/* 3.方案三: 设置负的的margin(没有兼容性) */
margin-right: -10px;
}
.item {
width: 230px;
height: 322px;
background-color: purple;
color: #fff;
/* 浮动 */
float: left;
margin-right: 10px;
/* margin: 0 5px; */
}
/* 1.有可能存在兼容性 */
/* .item:nth-child(5n) {
margin-right: 0;
} */
/* 2.麻烦一点点 */
/* .item.last-item {
margin-right: 0;
} */
</style>
</head>
<body>
<div class="content">
<div class="box">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
</div>
</div>
</body>
</html>
九、浮动练习三
![](https://i-blog.csdnimg.cn/blog_migrate/a482fdf3742285dde9882334f814217e.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content {
width: 1190px;
margin: 0 auto;
background-color: #f00;
height: 1000px;
}
.wrapper {
margin-right: -10px;
}
.item {
width: 290px;
background-color: purple;
margin-bottom: 10px;
float: left;
margin-right: 10px;
}
.item.left {
height: 370px;
}
.item.right {
height: 180px;
}
</style>
</head>
<body>
<div class="content">
<div class="wrapper">
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
</div>
</div>
</body>
</html>
十、浮动练习四
![](https://i-blog.csdnimg.cn/blog_migrate/499cec9e8c5541c933443e7272629c85.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content {
width: 1100px;
margin: 0 auto;
height: 800px;
background: #ccc;
}
.box {
/* margin-left: 1px; */
}
.item {
width: 221px;
height: 168px;
background: orange;
color: #fff;
float: left;
border: 1px solid #000;
margin-right: -1px;
box-sizing: border-box;
}
.item.first {
width: 220px;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
<div class="item first">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span, strong {
float: left;
}
span {
background-color: #f00;
}
strong {
background-color: #0f0;
margin-left: -10px;
}
</style>
</head>
<body>
<span>我是span元素</span>
<strong>我是strong元素</strong>
</body>
</html>
十一、浮动的问题 – 高度塌陷
![](https://i-blog.csdnimg.cn/blog_migrate/f812379afa706e5c9edd55ccd2f14be8.png)
十二、CSS属性 - clear
![](https://i-blog.csdnimg.cn/blog_migrate/b141f5b2515337821aac775f4143fd14.png)
十三、清除浮动的方法
![](https://i-blog.csdnimg.cn/blog_migrate/9843e9d203b0b9cf6293b05a319874ae.png)
十四、方法三 – 伪元素清除浮动
![](https://i-blog.csdnimg.cn/blog_migrate/522423b6a7463bd4dde95ed36998d39c.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content {
width: 1190px;
margin: 0 auto;
background: #f00;
}
.wrapper {
margin-right: -10px;
}
.item {
width: 290px;
background-color: purple;
margin-bottom: 10px;
float: left;
margin-right: 10px;
}
.item.left {
height: 370px;
}
.item.right {
height: 180px;
}
/* 其他的内容 */
.other {
height: 100px;
background: #0f0;
}
.line {
/* height: 10px; */
/* background: blue; */
clear: both;
}
/* 最终的解决方案 */
.clear_fix::after {
content: "";
clear: both;
display: block;
/* 浏览器兼容 */
visibility: hidden;
height: 0;
}
.clear_fix {
/* IE6/7 */
*zoom: 1;
}
</style>
</head>
<body>
<!-- 因为所有的后代item元素都是浮动的, 脱离标准流 -->
<!-- 不会向父元素汇报高度, 那么content元素压根就没有高度 -->
<div class="content">
<div class="wrapper clear_fix">
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<!-- <div class="line"></div> -->
</div>
</div>
<div class="content">
<div class="wrapper clear_fix">
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<!-- <div class="line"></div> -->
</div>
</div>
<!-- 我认为content没有高度, 那么我们就会直接在上面显示 -->
<div class="other"></div>
</body>
</html>