浮动是css里面布局最多的一个属性,也是很重要的一个属性。让块元素在页面中横向展示的效果。
标准文档流
当一个元素浮动之后,它会被移出正常的文档流,然后向左或者向右平移,一直平移直到碰到了所处的容器的边框,或者碰到另外一个浮动的元素。所以在了解浮动之前我们需要了解一下什么是标准文档流
标准文档流指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。
css中让一个元素脱离标准文档流:
- 浮动
- 绝对定位
- 固定定位
块级元素和行内元素
-
块级元素:
1、独占一行
2、可以设置宽、高
3、如果不设置宽度,宽度默认为容器的100% -
行内元素:
1、与其他元素同行显示
2、不可以设置宽、高
3、宽高就是文字或图片的宽高
浮动的基础知识
- 会使元素向左或者向右移动,只能左右,不能上下。
- 浮动元素碰到包含框或另一个浮动框,浮动停止。
- 浮动元素之后的元素将围绕它,之前的不受影响。
- 浮动元素会脱离标准流。
- 浮动的基本语法:
float: left 靠左浮动
float: right 靠右浮动
float: none 不使用浮动
文字环绕图片的原理
当我们给图片设置向左浮动以后,图片脱离文档流,这时文字应该往上移从而被图片遮挡住部分的文字,但是文字有特殊的解析机制,它会在一个不被盖住的地方显示,所以出现了文字环图片的效果
使用浮动后产生的问题
- 高度塌陷
我们知道,一个块级元素如果没有设置height,其height是由子元素撑开的。对子元素使用了浮动之后,子元素会脱离标准文档流,也就是说,父级元素中没有内容可以撑开其高度,这样父级元素的height就会被忽略,这就是所谓的高度塌陷。
例如,对container不设置高度,对三个盒子都设置为左浮动,这时container出现了高度塌陷,浮动溢出的问题
如图:
清除浮动的常用方法
清除浮动语法:
clear:none(默认)丨left丨right丨both
1.clear:left左侧抗浮动,只影响自身,不影响其他相邻元素
2.clear:right右侧抗浮动,只影响自身,不影响其他相邻元素
3.clear:both左右侧抗浮动,只影响自身,不影响其他相邻元素
注:clear不是把元素身上的浮动清除掉,而是让元素规定的那一侧不允许有其他的浮动元素。
结合语法的几种应用方式:
1.浮动元素后使用一个空元素
例如:<div class=“class”></div>
2.给浮动元素的容器添加overflow:hidden;
(zoom:1 用来兼容ie浏览器/触发hasLayout兼容IE6,7/)
3.使用CSS3的:after伪元素(常用)(给浮动元素的容器添加clearfix的类名)
.clearfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix{zoom:1;}/触发hasLayout兼容IE6,7/
4.给父元素定义height。只适合高度固定的布局。
5.父元素也一起浮动。不推荐,会产生新的浮动问题。
4.5只做了解即可,后续开发中用到的不多,所以我们来比较一下前面3中方法:
第一种 , 结尾处加空div标签clear:both
如果页面浮动布局多,就要增加很多空div ,会感觉很麻烦了
第二种,父级div定义overflow:hidden
用起来很省事 ,只有一行代码 ,不过因为overflow:hidden还有一个作用就是超出盒子的内容会被隐藏 ,所以不能和position配合使用,因为超出的就会被隐藏
第三种 , 父级div定义伪类:after和zoom
这种方法样式的代码多,要两段代码结合使用,才能让主流浏览器都支持
总结:这三种方式差异并不是很大 . 实际运用中 ,第三种用法比较多 . 是因为第三种直接在css定义一个公共的类名 ,然后清除浮动是给元素加上类名即可,用起来比较方便
案例
- 导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nav-demo</title>
<link rel="stylesheet" href="nav.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="title">
<a href="#">Balbal</a>
</div>
<ul class="nav">
<li><a href="#">Meet</a></li>
<li><a href="#">Close</a></li>
<li><a href="#">Understand</a></li>
<li><a href="#">Love</a></li>
</ul>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
.container{
width: 100%;
margin: 0 auto;
}
.header{
width: 100%;
background-color:gray;
overflow: hidden;
zoom: 1;
}
.header .title{
width: 200px;
height: 80px;
font-size: 30px;
text-align: center;
line-height: 80px;
float: left;
}
.header .nav{
float: right;
overflow: hidden;
zoom: 1;
padding-right: 30px;
}
.header .nav li{
float: left;
margin-right: 20px;
}
.header .nav li a{
padding: 0 20px;
height:80px;
line-height: 80px;
display: block;
font-size: 16px;
}
.header .nav li a:hover{
color:#fff;
}
显示效果: