浮动用来实现并排
浮动的最本质功能:用来实现并排
比如下面的三个div是块级元素。它们不能并排显示。为了让他们能够显示在一排,我们就要让三个div浮动起来,我们给div添加属性:float: left后三个div就并排显示,并且2号div紧挨着1号div,3号div紧挨着2号div,记住这个紧挨着的特性,后面有用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
color: #fff;
font-size: 20px;
}
.box1 {
background: #f00;
}
.box2 {
background: #0f0;
}
.box3 {
background: #00f;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
color: #fff;
font-size: 20px;
float: left;
}
.box1 {
background: #f00;
}
.box2 {
background: #0f0;
}
.box3 {
background: #00f;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
浮动使用的要点
浮动使用要点1:要浮动,并排的盒子都要设置浮动(即一个层级的兄弟元素都要浮动)
下面的代码中我们让1号和2号div浮动但是3号div没有浮动,我们会看到3号div被1号div覆盖了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
color: #fff;
font-size: 20px;
}
.box1 {
background: #f00;
float: left;
}
.box2 {
background: #0f0;
float: left;
}
.box3 {
background: #00f;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
浮动使用要点2:父盒子要有足够的宽度,否则子盒子会掉下去
下面的代码我们可以看到:三个子div的宽度加起来为300px,但是父div只有299px.所以3号div掉下去了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 299px;
height: 100px;
background: #ff11ff;
}
.box1,.box2,.box3 {
width: 100px;
height: 100px;
color: #fff;
font-size: 20px;
}
.box1 {
background: #f00;
float: left;
}
.box2 {
background: #0f0;
float: left;
}
.box3 {
background: #00f;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
浮动的顺序贴靠特性
子盒子会按顺序进行贴靠,如果没有足够空间,则会寻找再前一个兄弟元素,一直找到它的父元素
下面的代码中,父div的宽度是440px,1、2、3号div的宽度总和为300px,所以可以并排显示,这时候父div的宽度还剩140px,而4号div的宽度是150px,想贴靠3号div宽度不够,所以就去找2号div贴靠,发现宽度够,就贴靠在2号div上。5号div的宽度300px想贴靠4号div的时候发现1、2、4号div加起来的宽度是350px,后面剩余的宽度不够。所以就去找1号div,发现宽度够,就贴靠在1号div上。同理6号div只能贴靠在他的父div上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
font-size: 20px;
color: #fff;
}
.box {
width: 440px;
height: 100px;
background: #ff11ff;
}
.box1 {
width: 100px;
height: 300px;
background: #f00;
float: left;
}
.box2 {
width: 100px;
height: 200px;
background: #0f0;
float: left;
}
.box3 {
width: 100px;
height: 100px;
background: #00f;
float: left;
}
.box4{
width: 150px;
height: 100px;
background: #77f;
float: left;
}
.box5{
width: 300px;
height: 100px;
background: #566;
float: left;
}
.box6{
width: 450px;
height: 100px;
background: #843;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
</div>
</body>
</html>
浮动的元素一定能设置宽高
浮动的元素不再区分块级元素、行内元素已经脱离了标准文档流,一律能够设置宽度和高度,即使它是span或者a标签等。
下面的代码中可以看到a标签设置了浮动后就可以设置宽度和高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a {
float: left;
margin-right: 10px;
width: 100px;
height: 50px;
background: #f00;
}
</style>
</head>
<body>
<a href="">我是链接1</a>
<a href="">我是链接2</a>
<a href="">我是链接3</a>
</body>
</html>
右浮动
浮动的兄弟元素中一定是按顺序来的。先第一个元素,再第二个元素,以此类推。
下面的代码中:链接1先浮动到右边 然后链接2,再然后链接3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 100px;
background: #0f0;
}
a {
float: right;
margin-right: 10px;
width: 100px;
height: 50px;
background: #f00;
}
</style>
</head>
<body>
<div>
<a href="">我是链接1</a>
<a href="">我是链接2</a>
<a href="">我是链接3</a>
</div>
</body>
</html>
BFC规范
什么是BFC规范
从一个现象开始说起:一个盒子不设置height,当内容子元素都浮动时,无法撑起自身。
下面的代码我们可以看到子元素都浮动起来后,父元素没有高度了。这是因为父元素没有形成BFC.
所谓BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
比如这里的box1。现在里面的子元素会影响到了box1的外面的元素的布局。所以这里的box1就不是一个隔离的独立的容器,就不是BFC.为了布局正常我们要让box1形成BFC.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
border: 1px solid #429;
}
a {
float: left;
margin-right: 10px;
width: 100px;
height: 50px;
background: #f00;
}
.box2 {
background: #00ff00;
}
</style>
</head>
<body>
<div class="box1">
<a href="">我是链接1</a>
<a href="">我是链接2</a>
<a href="">我是链接3</a>
</div>
<div class="box2">
我应该在下面
</div>
</body>
</html>
如何形成BFC
方法1: float的值不是none
方法2: position的值不是static或者relative
方法3: display的值是inline-block、flex或者inline-flex
方法4: overflow:hidden;(最常用)
下面的代码中我们用了方法4给box1加上overflow: hidden; 后box2的布局就正常了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
border: 1px solid #429;
}
.box1 {
overflow: hidden;
}
a {
float: left;
margin-right: 10px;
width: 100px;
height: 50px;
background: #f00;
}
.box2 {
background: #00ff00;
}
</style>
</head>
<body>
<div class="box1">
<a href="">我是链接1</a>
<a href="">我是链接2</a>
<a href="">我是链接3</a>
</div>
<div class="box2">
我应该在下面
</div>
</body>
</html>