一、浮动的定义
浮动:float
作用:让我们的元素在某一个方向在一行并排排列
浮动的特殊效果:元素脱离标准流,既可以设置宽高,又可以一行排列。
属性值:left,right
左浮动: float:left; 会依次去贴父元素的左边
浮动是不可以继承的
左浮动: float:left; 依次去贴父元素的左边,序号从左到右
右浮动: float:right; 依次去贴父元素的右边,序号从右到左
同一个父盒子里,子元素可以有不同方向的浮动
二、浮动的性质
1、浮动的元素脱标
常见的标签都是标准流的,区分行块,如果给元素设定浮动属性,元素会脱离标准流,元素既可以设置宽度,又可以排在一行。
span设置了浮动,就会脱标,如果没有添加float:left则不会出现粉色盒子
span标签浮动后,不需要转换成块级标签,就能设置宽高,浮动的标签已经不区分行内、块了。
如果父盒子范围不够放下所有子盒子,后面的盒子会自动换行去贴上一个元素的边,依次去找上一个盒子,如果上一个盒子的距离还不够,再往上找。
子盒子如果高矮不同,中间出现了缝隙,后面的盒子不会去转空
2、没有margin塌陷现象
浮动的元素脱离标准流,标准流利的margin在垂直方向上有塌陷的现象,而脱离标准流后,塌陷失效
浮动前 ↓
浮动后 ↓
3、浮动元素让出标准流位置
元素在标准文档流里有自己的书写位置,一个元素写完之后才能加载另外一个元素。元素浮动之后,不再是标准流,位置会让给后面标准文档流里的标签元素。
粉色盒子设置了float:left;让出的效果像是压盖效果。但我们实际上不需要用浮动制作压盖,用后面学习的绝对定位制作压盖。
同一个父盒子里,有的元素浮动,有的不浮动,这种会影响标准流的显示效果。一个父盒子里的元素要不动,就都别动。
->> 要浮动就都浮动 << -
4、浮动有字围效果
文字不像盒子背景一样,不会被浮动的元素给遮盖住,文字会绕开浮动元素进行排列
5、收缩
div本身是块级元素,如果没有设置宽度,就会独占一行,但是设置浮动后,就会收缩。
三、清除浮动
1、浮动存在的问题
1)浮动的元素不能撑高父级。
元素脱离标准流后,不能再撑高它的父盒子。
2)浮动会影响后面的元素
如果后面的浮动方向相同,会去贴上一个浮动最后的元素的边。
2、直接给父盒子加高度
给父级元素增加高度,它的内部的浮动元素,被限制了范围,不再影响后面的元素浮动。
效果:解决父级高度的问题,解决浮动影响后面的浮动的问题。
问题:高度还是不能够自适应,没有从根本上解决
3、清除浮动属性clear
元素都可以设置一个叫clear的属性,作用是清除浮动
属性值:left、right、both
作用:clear整体表示清除自身受到的其他元素带来的浮动的影响
both:清除受到 的左右两个方向的浮动影响
(box2不受box1的浮动的影响)
但问题:父盒子还是不能被子盒子撑高,margin如果小于中间浮动的子元素的高度,显示效果失效。
4、隔墙法
隔墙法:在相互影响的元素中间加一道墙,阻隔开两
的元素,墙上面添加一个clear属性。
1)外墙法:
在右浮动元素的父盒子之间隔一堵墙。
解决:浮动互相影响
问题:高度不能自适应,Margin失效
- 内墙法
将清除浮动的墙放在有浮动元素的父盒子内部的最后。
只要有浮动,就在盒子内部加一道墙。
>> 解释:cl盒子本身是个标准流,在父盒子最后,把盒子给撑高了,把浮动存在的问题都解决了。
>>解决:浮动相互影响,高度自适应,margin失效。
>> 缺点:I. html结构布局,很多需要进行浮动,每个浮动的盒子都要加个清除浮动.标签,页面结构复杂会出现很多冗杂没有意义的标签。
II.一个盒子内的标签要浮动都浮动,但是清除标签这堵墙是标准流的元素。
5、overflow:hidden
盒子内部的元素可以设置溢出模式,隐藏,自动显示。
overflow:溢出。
属性值:1)hidden 溢出隐藏 2)auto 溢出滚动
overflow的小功能:能清除盒子内部元素的浮动影响,给父盒子添加overflow
解决:相互浮动的影响,高度自适应,margin失效
优势:能够解决所有问题,不会增加无用的标签。
overflow:hidden 加载机制:
高度自适应:如果元素有溢出隐藏的属性,网页加载时,会强制地去元素内部搜索,识别所有内部元素的高度,会用最高的元素高度配给我们父盒子的自适应高度。
浮动影响:加载时,如果有溢出隐藏,强制检索,看盒子内部是否有浮动的元素;如果有,会被整体管理起来,在自身的高度内,不会影响其他的浮动元素。
实际工作中就用overflow来清除浮动。如果遇到大的结构,会在结构之间加一堵外墙。
浮动练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
/*原子类,公共类*/
.inner_c{
width: 970px;
margin: 0 auto;
}
.cl{
clear: both;
}
.h10{
height: 10px;
}
.mb10{
margin-bottom: 10px;
}
.mb8{
margin-bottom: 8px;
}
.mr10{
margin-right: 10px;
}
/*header*/
.header{
overflow: hidden;
}
.header h1{
float: left;
width: 277px;
height: 103px;
background-color: #FF8888;
}
.header .lang{
float: right;
width: 137px;
height: 49px;
background-color: #EEFFBB;
}
.header .nav{
float: right;
width: 679px;
height: 46px;
background-color: #EEFFBB;
}
/*content*/
.content{
overflow: hidden;
}
.content .slide{
float: left;
width: 310px;
height: 435px;
background-color: #FFEE99;
}
.content .main_news{
float: left;
width: 450px;
height: 400px;
}
.content .main_news .main_news1{
height: 240px;
background-color: #AAFFEE;
}
.content .main_news .main_news2{
height: 110px;
background-color: #AAFFEE;
}
.content .main_news .main_news3{
height: 30px;
background-color: #AAFFEE;
}
.content .main_r{
float: left;
width: 190px;
height: 401px;
background-color: #F08080;
}
.content .main_nav{
float: left;
width: 650px;
height: 25px;
background-color: #99FF99;
}
/*footer开始*/
.footer{
overflow: hidden;
width: 970px;
height: 35px;
background-color: #99BBFF;
}
</style>
</head>
<body>
<!-- header开始 -->
<div class="header inner_c">
<h1 >logo</h1>
<div class="lang mb8">English</div>
<div class="nav">导航</div>
</div>
<div class="cl h10"></div>
<!-- header结束content开始 -->
<div class="content inner_c">
<div class="slide mr10"></div>
<div class="main_news mr10 mb10">
<div class="main_news1 mb10">1</div>
<div class="main_news2 mb10">2</div>
<div class="main_news3">3</div>
</div>
<div class="main_r"></div>
<div class="main_nav"></div>
</div>
<div class="cl h10"></div>
<!-- content结束footer开始 -->
<div class="footer inner_c"></div>
<!-- footer结束 -->
</body>
</html>