WEB前端-float浮动
时间:2023-09-28 02:30:01 | 来源:网站运营
时间:2023-09-28 02:30:01 来源:网站运营
WEB前端-float浮动:
一、普通流(标准流):默认状态,元素自动从左往右,从上往下的排列。
1、块元素:div、p、h1~h6、ul、ol、li、dl、dt、dd
- 独占一行
- 可以设置宽、高
- 如果不设置宽度,宽度默认为容器的100%
2、行内元素:span、a、b、i、u、em....
- 与其它元素同行显示
- 不可以设置宽、高
- 宽高就是文字或图片的宽高
二、浮动
1、概念- 会使元素向左或向右移动,只能左右,不能上下。
- 浮动元素碰到包含框或另一个浮动框,浮动停止。
- 浮动元素之后的元素将围绕它,之前的不受影响。
- 浮动元素会脱离标准流。
2、语法- float:left 靠左浮动
- float:right 靠右浮动
- float:none 不使用浮动
三、清除浮动(闭合浮动)
1、语法clear : none | left | right | both
- clear:left 左侧抗浮动,只影响自身,不影响其他相邻元素
- clear:right 右侧抗浮动,只影响自身,不影响其他相邻元素
- clear:both 左右两侧抗浮动,只影响自身,不影响其他相邻元素
2、常用方法<div class= "clear"></div>
overflow:hidden; *zoom:1; /*触发 hasLayout兼容IE 6、7*/
.clearfix:after{ content"."; display: block; height:0; visibility: hidden; clear:both; } .clearfix { *zoom: 1; /* 触发hasLayout兼容IE 6、7*/ }
3、其他方法- 父级元素定义height。只适合高度固定的布局。
- 父级元素也一起浮动。不推荐,会产生新的浮动问题。