很多人对float属性理解的并不好,所以对float布局就有一点恐惧(比如我~),因为用float布局时会出现很多莫名其妙得问题,比如:
1,父元素的高度怎么没啦?
2, float元素怎么和其他元素重叠在一块了?
说到float,就必须先说另外一个概念: 文档流
文档流有两种:
一,内联元素的文档流从左往右流动,比如:
<style>
div {
border: 1px solid red;
width: 600px;
}
</style>
<div>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</div>
可以看到hello水平排列的, 在到达箭头所指的位置时,换行了。为什么呢? 因为剩下的位置不够一个hello的排列,根据内联元素从左往右流动的规则,hello文本会另起一行
二, 块级元素的文档流从上往下流动,比如:
<style>
div {
border: 1px solid red;
width: 600px;
}
</style>
<div>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
</div>
效果如图所示:
重点来了!!!
块级元素的高度由其文档流的高度决定
再来看float布局,使用float的元素会脱离文档流,看一个例子:
<style>
.container {
border: 3px solid red;
}
.container div {
float: left;
width: 100px;
height: 100px;
}
.content1 {
background: black;
}
.content2 {
background: blue;
}
.content3 {
background: gray;
}
.content4 {
background: yellow;
}
.content5 {
background: green;
}
.content6 {
background: tomato;
}
</style>
<div class="container">
<div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>
<div class="content4"></div>
<div class="content5"></div>
<div class="content6"></div>
</div>
可以看到父元素没有被里面的元素撑起来,只有border
根据:
块级元素的高度由其文档流的高度决定
父元素高度塌陷不是很正常嘛?
如何解决父元素高度塌陷问题呢?
只要给浮动元素的爸爸加上一个clearfix:
.clearfix::after {
content: '';
display: block;
clear: both;
}
这样,就解决了浮动元素的爸爸高度塌陷问题。
那么如何用float实现两栏布局呢?
<style>
.clearfix::after {
content: '';
display: block;
clear: both;
}
.container {
border: 3px solid red;
}
.container div {
width: 100px;
height: 100px;
}
.content1 {
float: left;
background: black;
}
.content2 {
float: left;
background: blue;
}
.content3 {
float: right;
background: gray;
}
.content4 {
background: yellow;
float: right;
}
</style>
<div class="container clearfix">
<div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>
<div class="content4"></div>
</div>
只需要让左边的元素左浮动,右边元素右浮动就ok啦