浮动
1、float:
(1)left:左浮动(从左向右排列);
(2)right:右浮动(从右向左排列);
(3)none:不浮动;
(4)浮动可以使元素按照指定的方向排列,直到遇到父元素的边界或者另一个浮动元素【停止】;
(5)浮动会使元素脱离文档流;
(6)文档流:所有可见元素在文档中的排列占位(块级从上向下排,行内元素从左向右排列);
2、浮动产生的问题:
(1)浮动脱离文档流,使父元素高度塌陷(无法撑开父元素);
(2)影响浮动元素之后的布局;
3、清浮动(解决浮动产生的问题):
(1)给父元素固定高度
缺点:不够灵活;
(2)给父元素加overflow:hidden
给visible以外的值都可以,存在溢出隐藏,滚动条的隐患;
(3)在父元素内部,浮动元素之后,定义一个空的,不浮动的,块元素{clear:both}
缺点:代码冗余,影响可读性;
(4)推荐方法
给元素的父元素加.clearfix
.clearfix:after{
content:'';
display:block;
clear:both;
}
4、浮动特性的总结:
(1)浮动会脱离文档流;
(2)浮动可以使块元素在一行排列;
(3)浮动使未定宽度的块元素适应内容;
(4)浮动使行内元素生成一个块级框(支持宽、高、垂直方向的padding/margin/line-height)
(5)浮动会提升元素层级;
(6)浮动会导致文本绕排(脱离文档流不脱离文本流);
(7)浮动父元素包含浮动子元素不会出现高度塌陷;
(8)浮动子元素的margin值,不会出现margin值传递与塌陷问题;