1.float

原理:元素相对于页面 漂浮 起来了
目的:为了让元素并排显示

2.float 问题

2.1 对后面的元素造成了影响

2.2 子元素float 父元素的高度塌陷了

4、浮动float - 图1
4、浮动float - 图2

清除浮动的方法

  1. (1)给下面的兄弟元素 clear:both;
  2. (2)给父级加 overflow:hidden;
  3. (3)用伪元素,给父级内容生成
  4. .parent::before{
  5. display:table;
  6. content:"";
  7. }
  8. .parent::after{
  9. display:table;
  10. content:"";
  11. clear:both;
  12. }