<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>脱标</title>
<style>
.box {
background-color: red;
}
.box1 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
/*
浮动的元素会脱离标准文档流 ===》 脱标
在标准文档流中，是区分行块级元素的，脱标后的元素不会区分行块级，它们都能接收盒模型属性
影响: 前一个元素如果设置了浮动;后一个元素没有设置浮动，会导致前一个元素覆盖住后一个元素，区域是前一个元素本身。
排序规则:
1. 同浮动方向的元素，先浮动的元素会显示在最前面，后浮动的元素显示在后面，依次排列
2. 不同浮动方向的元素, 同向聚集，依次排列。左浮动的找左浮动，右浮动的找右浮动。
3. 浮动元素浮动后的位置，是根据【浮动前在标准文档流中的位置】来决定的。(所以说第一节中有 半脱离标准文档流的说法)
*/
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>上述运行结果：
219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
