CSS浮动概念
2019-05-13 本文已影响0人
zsyyyyy
浮动的概念： 文档流
html元素依照默认规则从上到下从左到右依次排列布局的方式 给元素设置float这个css元素后，可以产生让元素脱离文档流的效果，按照浮动的方向漂浮起来， 直到遇到自己爸爸的边框或者遇到其他浮动元素。
不设置浮动的样子：
image.png
当给三个son都设置左浮动的时候，三个div向左排成一排：
div1.png
.son{
width: 150px;
height: 150px;
float: left;/*当给三个son都设置左浮动的时候，三个div向左排成一排*/
}
.son1{
background:red;
}
.son2{
background: green;
}
.son3{
background: blue;
}
</style>
<body>
<div class="baba">
<div class="son son1">
</div>
<div class="son son2">
</div>
<div class="son son3">
</div>
<!--给son设置样式，son1 、son2、son3都会有样式-->
</div>
当son1 son2设置左浮动，son3设置右浮动，son3会漂浮到大div的右边
image.png
.son{
width: 150px;
height: 150px;
}
.son1{
background:red;
float: left;
}
.son2{
background: green;
float: left;
}
.son3{
background: blue;
float:right;
}
</style>
<body>
<div class="baba">
<div class="son son1">
</div>
<div class="son son2">
</div>
<div class="son son3">
</div>
<!--给son设置样式，son1 、son2、son3都会有样式-->
</div>
当给三个son都设置右浮动的时候，首先代码是从上往下执行的，所以最先漂浮到最右边的是son1，然后son2，再到son3
image.png
当只给son1设置左浮动的时候；son1会漂浮起来，son2顶上去，但是显示的是son1，因为son1 漂浮起来挡住了son2，son2是在在son1的后面的，绿色部分为son2,。
image.png
.son{
width: 150px;
height: 150px;
}
.son1{
background:red;
float: left;
}
.son2{
background: green;
width: 200px;
height: 200px;/* 给son2设置大点，看它的位置*/
}
.son3{
background: blue;
}
</style>
<body>
<div class="baba">
<div class="son son1">
</div>
<div class="son son2">
</div>
<div class="son son3">
</div>
<!--给son设置样式，son1 、son2、son3都会有样式-->
</div>
当给son1 son2都设置了左浮动，显示son跟son2，son3会顶上去在son1的后面：
image.png
.son{
width: 150px;
height: 150px;
}
.son1{
background:red;
float: left;
}
.son2{
background: green;
float:left;
}
.son3{
background: blue;
width: 200px;
height: 200px;/* 给son2设置大点，看它的位置*/
}
</style>
<body>
<div class="baba">
<div class="son son1">
</div>
<div class="son son2">
</div>
<div class="son son3">
</div>
<!--给son设置样式，son1 、son2、son3都会有样式-->
</div>
当给son1跟最后一个son3设置左浮动的时候，son2会顶上去，躲在son1的后面，显示son1跟son3， 最后son3不会改变位置，因为给元素设置浮动，只会对元素后面的元素产生影响， son3是最后一个，后面没有其他元素，所以位置不变，但是son3也是漂浮起来的了
image.png
.son{
width: 150px;
height: 150px;
}
.son1{
background:red;
float: left;
}
.son2{
width: 200px;
height: 200px;
background: green;
}
.son3{
background: blue;
float:left;
}
</style>
<body>
<div class="baba">
<div class="son son1">
</div>
<div class="son son2">
</div>
<div class="son son3">
</div>
<!--给son设置样式，son1 、son2、son3都会有样式-->
</div>
