文档流

文档流是文档中可显示对象在排列时所占用的位置。

float特性

加浮动的元素,会脱离文档流,会延迟父容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动的元素进行排列。

float取值

left

right

none(默认值)

float注意要点

  • 只会影响后面的元素

  • 内容默认提升半层

  • 默认宽根据内容决定

  • 换行排列

  • 主要给块元素添加,但可以给内联元素添加

清除浮动

上下排列:

  • 利用clear属性清除float浮动

嵌套排列:

  • 宽高固定:不推荐,不能把高度固定死,不适合做自适应的效果。

  • 父元素浮动:不推荐,因为父容器浮动也会影响到后面的元素。

  • overflowhidden(BFC规范),如果柚子元素溢出,那么会受到影响。

  • displayinline-block(BFC规范),不推荐,父容器会影响到后面的元素。

  • 设置空标签:不推荐,会多添加一个标签。

  • after伪类:推荐,是空标签的加强版。

拓展

BFC即Block Formatting Context的缩写,中文译为块级格式化上下文,是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。BFC的目的是为了形成一个完全独立的空间,让空间中的子元素不会影响到外面的布局。

不起眼的小广告

上一篇:CSS reset

下一篇:Position定位