本文详细介绍了CSS中的浮动特性，包括元素如何脱离标准文档流、浮动元素的性质，如并排显示、字围效果及收缩现象。同时，重点讨论了清除浮动的方法，如给祖先元素添加高度、使用clear属性、隔墙法、overflow隐藏以及父级添加伪类，以解决浮动带来的高度塌陷问题。作业部分则鼓励读者实践这些概念。
标准文档流：
宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。
标准文档流特性
- 1.空白折叠现象：
无论多少个空格、换行、tab，都会折叠为一个空格。比如，如果我们想让img标签之间没有空隙，必须紧密连接：
<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />
-
2.高矮不齐，底边对齐：
<img src="images/0.jpg" /> <p>hhhhh</p> -
3.块级元素和行级元素的区别
标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！
css中一共有三种手段，使一个元素脱离标准文档流：
（1）浮动
（2）绝对定位
（3）固定定位
浮动性质：
- 1.浮动的元素脱标
一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100px;
height: 100px;
background: pink;
float: left;
}
.box1{
width: 300px;
height: 300px;
background: skyblue;
}
</style>
</head>
<body>
<span class="box"></span>
<div class="box1"></div>
</body>
</html>
- 2.浮动的元素互相贴靠
<!DOCTYPE html>
<html lang="en"&
最低0.47元/天 解锁文章
2573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
