亚里士多德曾经说过:人生最终价值在于觉醒和思考的能力,而不只在于生存。 (下面是正题)
1.浮动的特点
1.浮动的特点
1.1浮动元素会脱离标准流(简称:脱标),在标准流中不占位置
看图: 例如:相当于从地面飘到了空中
1.2浮动元素比标准元素高半个级别,可以覆盖标准流中的元素
1.3浮动找浮动(同方向浮动),下一个浮动元素会在上一个浮动元素后面左右浮动
1.4浮动元素会受到上面元素边界的影响
1.5浮动元素有特殊显示效果
*一行显示多个
*可以设置宽高
2.为何要清除浮动
如果子元素浮动了,假设父元素不给高度,父元素的高度为0,此时子元素不能撑开标准流的块级父元素,
原因:子元素浮动后脱标->不占位置
目的/方法:需要父元素 有高度,从而不影响其他网页的布局.
3.清除浮动的方法
3.1给父元素设置宽高(简单暴力)
3.2额外标签法
3.3单伪元素清除法(使用after伪元素清除浮动(推荐使用))
3.4双伪元素清除法(推荐)
3.5给父元素设置overflow:hidden;
额外标签法(在浮动元素末尾添加一个空的标签.例如:)
/* 清除浮动 */
.clearfix::after {
content: '.';
display: block;
clear: both;
height: 0;
visibility: hidden;
}
/* 兼容ie6 ie7 */
.clearfix {
*zoom: 1;
}
/* 双伪元素清除法 */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
注:以后会日推更新.
注:有小白想要练习关于一些html/css/js等 资源文件项目的 的可以关注我找我要~~~