CSS 浮动样式
当元素被浮动时,会脱离文档流,根据 float 的值向左或者向右移动,直到它的外边界碰到父元素的内边界或另外一个浮动元素的外边界为止,是 CSS 布局中实现左右布局的一种方式
- 文档流:文档流是元素在 web 页面上的一种呈现方式,按照出现的先后顺序进行排列
源码预览
打开窗口查看源码
清除浮动的方案
- clear 属性
源码预览
打开窗口查看源码
- BFC(后面再说)
源码预览
打开窗口查看源码
- 空标签
源码预览
打开窗口查看源码
- .clearfix::after
源码预览
打开窗口查看源码
浮动特性注意点
- 只会影响后面的元素
- 文本不会被浮动元素覆盖
- 具备内联盒子特性:宽度由内容决定
- 具备块级盒子特性:支持所有样式
- 浮动放不下,会自动换行
源码预览
打开窗口查看源码