浮动特性
1、浮动元素有左浮动(float:left)和右浮动(float:right)两种
2、浮动的元素会向左或向右浮动,碰到父元素边界、其他元素才停下来
3、相邻浮动的块元素可以并在一行,超出父级宽度就换行(常用于制作导航栏)
4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)
5、浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,形成文字饶图的效果
6、父元素如果没有设置尺寸(一般是高度不设置),父元素内整体浮动的元素无法撑开父元素【bug】,父元素需要清除浮动
7、浮动元素之间没有垂直margin的合并
8、浮动之后不占据原来的位置(脱标) 想象成四面围墙的楼,浮动之后就浮起来,不会占用地面的空间 但是会出现6这个bug
浮动的作用
1、文本绕图
- 浮动脱标之后 按道理应该会盖住文字 这里文字所在的div会被遮盖部分,但是文字不会进入图片下方。 按照特例记住就好。
<style>
.con{
width: 300px;
height: 180px;
border: 3px solid greenyellow;
}
.pic{
width: 80px;
height: 80px;
float: left;
background-color: cornflowerblue;
margin: 10px;
}
</style>
<body>
<div class="con">
<div class="pic"></div>
<div class="text">浮动元素后面没有浮动的元素会占据浮动元素的位置,
没有浮动的元素内的文字会避开浮动的元素,形成文字饶图的效果浮动元素后面没有浮动的元素会占据浮动元素
的位置,没有浮动的元素内的文字会避开浮动的元素,形成文字饶图的效果
</div>
</div>
</body>
2、制作导航 导航实例
3、网页布局
清除浮动 (解决6中的bug)
1、浮动元素的父级上增加属性overflow:hidden
2、在最后一个浮动元素的下面新建一个空的div,给它样式属性 clear:both(不推荐)
3、浮动元素的父级上使用 after伪元素清除浮动(推荐),.clearfix
.clearfix:after{
content: "";
display: table;
clear: both;
}
<div class="outer clearfix">
...
</div>
4、 同时解决浮动bug 和margin-topbug
.clearfix:before, .clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
/*ie是非标准浏览器 用来兼容ie*/
.clearfix{
zoom: 1;
}
<div class="outer clearfix">
...
</div>