1.浮动定义:
使元素脱离文档流(文档中可显示对象在排列时所占用的位置),按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。
2.为什么要清除浮动:
浮动不再占据文档流的位置,也使浮动元素周围的元素表现的如同浮动元素不存在一样,因此带来些副作用,如:
1>块状元素会钻进浮动元素下面,被浮动元素覆盖
2>行内元素,如文字会环绕在浮动的元素周围,为浮动元素留出空间
3>浮动元素的父元素会坍塌。
因此需要清除浮动,使得浮动元素依旧浮动,而浮动元素周围的元素不会受浮动的影响
3.清除浮动的方法:
背景例子:子级item添加左浮动之后,父级box未能包住子级item ,即父级崩塌,下面针对这个例子列出清除浮动的几种方法
<style>
.box{
border: 1px solid red;
}
.item{
width: 200px;
height: 200px;
background-color: black;
float: left;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
1.加高
让父级元素包住,给父级元素加高度(大于item高度)
缺点:扩展性不好
.box{
border: 1px solid red;
height: 500px;
}
2.让父级跟着浮动
问题:页面中所有元素都得跟着加浮动,且margin左右自动失效(floats bad !)
.box{
border: 1px solid red;
float: left;
}
3.inline-block 清浮动方法:
回顾一下display下面的inline-block功效:使块元素<——>内联元素两者特性互换;给父级元素加上{display:inline-block;}
与让父级跟着浮动效果一致。
4.空标签清除浮动,在item同级处加上空标签clearfix,然后给clearfix加上clear属性。 问题:IE6 最小高度 19px;(解决后IE6下还有2px偏差)
css的clear属性:
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
<style>
.clearfix{
clear:both;
}
</style>
<body>
<div class="box">
<div class="item"></div>
<div class="clearfix"></div>
</div>
</body>
5. .br清浮动,在item同级处加上<br/>标签,使其<br clear="all"/>
问题:不符合工作中:结构、样式、行为,三者分离的要求
<body>
<div class="box">
<div class="item"></div>
<br clear="all"/>
</div>
</body>
6.overflow:hidden 清浮动方法;
问题:需要配合 宽度 或者 zoom 兼容IE6 IE7;
overflow属性:
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
清浮动应用:父级元素加上overflow:hidden;
7.最后但是是最重要主流的方式: after伪类 清浮动方法
综合方法5.6单独标签助清浮动的优点,并弊其短处;
after伪类:在元素后面增加内容
.**:after{content:"";}
食用方法:父级元素加伪代类
<style>
.clearfix{
*zoom:1;
/*授权 ie6下 使元素根据自身内容计算宽高*/
}
.clearfix:after{
/*after ie6、7下不支持*/
content: "";
display: block; /*使其成块级元素*/
clear: both;
}
</style>
<body>
<div class="box clearfix">
<div class="item"></div>
</div>
</body>
想巩固css伪类、伪元素知识请移步↓↓↓ (●’◡’●)
css :before,:after伪元素的理解和妙用