浮动
来源：互联网 发布：java中point的用法 编辑：程序博客网 时间：2024/06/02 23:36
浮动
栗子1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
</head>
<style>
.test{
width: 100px;
height: 100px;
background: red;
border:1px solid #000;
/*float: left; 往左正序排列*/
float: right;/*往右正序排列*/
}
</style>
<body>
<!--标准流中正常排序的方式，网页中正常的表现形式，竖着排列-->
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
</body>
</html>
测试结果：
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
栗子2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动_02</title>
</head>
<style>
.parent {
width: 400px;
/*height: auto; 高度等于内部子元素垂直的总和,被子元素撑开
或者直接不给高度*/
border: 2px solid green;
/*解决办法：告诉父元素绿色区块里面有一个红色区块，锁死红色块
方法一：用闭合去写*/
/*overflow: hidden;*/
/*如果有东西超出，让其隐藏，闭合在区域内*/
}
.test {
width: 100px;
height: 100px;
background: red;
float: left;
/*设置了浮动的标签后，就不在原来的标准流上，标准流正常为垂直排列，即突破了正常的标准流，
浮到了标准流上方（外部），从而父元素感知不到——>没有高度，不在一个层次
不在一个层次会导致：排序混乱*/
}
.block {
width: 200px;
height: 200px;
background: lightblue;
}
/*方法二：闭合浮动：
到我为止，之前元素全部闭合，包裹起来，让父元素感知到所含的元素，所有浮动不再我和后面的元素
理解为清除浮动*/
.clear {
clear: both;
}
</style>
<body>
<div class="parent">
<div class="test"></div>
<div class="clear"></div>
</div>
<div class="block"></div>
</body>
</html>
测试结果：
