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。只适合高度固定的布局。
- 父级元素也一起浮动。不推荐,会产生新的浮动问题。
在线咨询
