本系列博客汇总在这里：JavaWeb_CSS 汇总
一、div 浮动
- HTML 页面的标准文档流（默认布局）是：从上到下，从左到右，遇块（块级元素）换行。
- 浮动层：给元素的 float 属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素（默认为body文本区域）的左右边框。而此浮动元素在文档流空出的位置，由后续的（非浮动）元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。
- Float 有 4 个值
（1）left ：元素向左浮动。
（2）right ：元素向右浮动。
（3）none ：默认值。
（4）inherit ：从父元素继承 float 属性。
（5）浮动后的 div 宽度会变成 0，但是其内边框可能撑起它的宽和高。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> www.weiyuxuan.com </title>
<style type="text/css">
.outside
{
font-size: 12px;
font-family: Arial;
padding: 10px;
background-color: red;
border: 1px solid black;
}
.inside1
{
padding: 10px;
border: 1px dashed black;
background-color: orange;
margin: 5px;
float:left;
/*
1.div1向左漂浮之后，宽度变为0
2.div1移到父元素的左边
3.div1的原始位置被空出来，由后面的html元素来补上
*/
}
.inside2
{
padding: 10px;
border: 1px dashed black;
background-color: blue;
}
</style>
</head>
<h1> 浮动 </h1>
<hr>
<body>
<div class="outside">
<div class="inside1">内部 div1</div>
<div class="inside2">内部 div2</div>
</div>
</body>
</html>
- 如果浮动的 div 前面有同级别 html 元素，该浮动的 div 会排在 html 元素后面浮动，不会覆盖 html 元素。
- 总结：div 的浮动对前面的 html 元素没影响，对后面的 html 元素有影响。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> www.weiyuxuan.com </title>
<style type="text/css">
.outside
{
font-size: 12px;
font-family: Arial;
padding: 10px;
background-color: gray;
margin: 5px;
border: 1px solid black;
}
.inside1
{
padding: 10px;
border: 1px dashed black;
background-color: orange;
}
.inside2
{
padding: 10px;
border: 1px dashed black;
background-color: yellow;
margin: 5px;
float:left;
}
</style>
</head>
<h1> 浮动 </h1>
<hr>
<body>
<div class="outside">
<div class="inside1">内部 div1</div>
<div class="inside2">内部 div2</div>
<div class="inside1">内部 div3</div>
</div>
</body>
</html>
- 多个同级块元素同时在一个方向浮动，则从该方向上水平依次排列。
- 如果多个同级 html 元素同时浮动，这几个 html 元素就会从左到右浮动排列，脱离了 div 的自动换行。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> www.weiyuxuan.com </title>
<style type="text/css">
.outside
{
font-size: 12px;
font-family: Arial;
padding: 10px;
background-color: gray;
margin: 5px;
border: 1px solid black;
}
.inside1
{
padding: 10px;
border: 1px dashed black;
background-color: orange;
}
.inside2
{
padding: 10px;
border: 1px dashed black;
background-color: yellow;
margin: 5px;
float:left;
}
</style>
</head>
<h1> 浮动 </h1>
<hr>
<body>
<div class="outside">
<div class="inside1">内部div1</div>
<div class="inside1">内部div2</div>
<div class="inside2">内部div3</div>
<div class="inside2">内部div4</div>
<div class="inside2">内部div5</div>
<div class="inside1">内部div6</div>
</div>
</body>
</html>
前面 div 的浮动会影响后面的 div 的布局，如果想消除该影响可以使用 clear: 。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> www.weiyuxuan.com </title>
<style type="text/css">
.outside
{
font-size: 12px;
font-family: Arial;
padding: 10px;
background-color: gray;
}
.inside1
{
padding: 10px;
border: 1px dashed black;
background-color: orange;
float: left;
}
.inside2
{
padding: 10px;
border: 1px dashed black;
background-color: green;
float: right;
}
.inside3
{
padding: 10px;
border: 1px dashed black;
background-color: yellow;
clear: both;
}
</style>
</head>
<h1> 浮动 </h1>
<hr>
<body>
<div class="outside">
<div class="inside1">内部div1</div>
<div class="inside2">内部div2</div>
<div class="inside3">内部div3</div>
</div>
</body>
</html>
如有错误，欢迎指正！
