1.语法: float:none/left/right
2.浮动特性:
(1)浮动元素会脱离标准流
脱离标准流的控制,移动到指定位置,并且浮动的盒子不再保留原先位置,也就是说后面的盒 子可以前进占据已经浮动盒子的位置
(2)如果多个盒子都设置了浮动,则浮动的元素会一行内显示并且元素顶部对齐且盒子与盒子之间无空隙,一行不够(父级元素装不下)则自动换行依旧贴着顶部对齐
(3)浮动元素会具有行内块元素特性(但盒子与盒子之间不会有空隙)
任何元素都可以浮动,添加浮动后具有行内块元素的特性
若对块级元素没设置宽度/高度,则默认宽度与父级一样宽,但添加浮动后,它的大小由内容多少来决定
2.浮动应用
(1)浮动通常与标准流父级搭配使用
也就是说,通常用一个标准流的元素框住,作为他的父级元素,则父级元素排列上下位置,而浮 动元素排列左右位置。
(2)一个元素浮动了,理论上其余兄弟元素也要浮动
3.清除浮动方法
(1)额外标签法
在最后一个浮动元素添加一个空的标签并为其添加clear属性
(2)父级添加overflow
给浮动元素的父级标签添加overflow属性,其属性值设置为hidden、auto或scroll
overflow属性
属性值 | 说明 |
visible | 溢出内容可见 |
hidden | 溢出的内容被修剪,其余内容是不可见的 |
scroll | 内容被修剪,但浏览器会显示滚动条以便查看内容(横纵都有滚动条) |
auto | 如果内容被修剪,则浏览器会显示滚动条查看内容(自动化) |
(3):after伪元素法
是额外标签法的升级版本,也是给给父元素添加.
语法:
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden; }
(4)双伪元素清除浮动
语法:.clearfix:before,.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden; }