---
title: 浮动
date: 2024-06-06T23:51:23Z
tags: []
---

## 元素浮动后的特点

1. 脱离文档流
2. 不管浮动前是什么元素,浮动后:默认宽与高都是被内容撑开(尽可能小),并且可以设置宽高
3. 不会独占一行,可以与其他元素共用一行
4. 不会像margin合并,也不会塌陷,能完美设置四个方向的margin和padding
5. 不会像行内块一样被文本处理(没有行内块的空白问题)

## 解决浮动产生的影响

1. 给父元素指定高度
2. 给父元素设置浮动,带来其他影响
3. 给父元素设置`overflow:hidden`
4. 给所有浮动元素的最后面,添加一个块级元素,并给块级元素设置`clear:both`
5. 给浮动的父元素,设置伪元素,通过伪元素清除浮动,原理与方案四相同

浮动原则:要么全部浮动,要不全都不浮动
