浮动

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

  1. 常规流
  2. 浮动
  3. 定位

应用场景

  1. 文字环绕
  2. 横向排列（菜单）

浮动的基本特点

修改float的属性值为：

默认值为none

  1. 当一个元素浮动后，元素必定为块盒（更改display属性为块盒）
  2. 浮动元素的包含块，和常规流一样，为父元素的内容盒

盒子尺寸

  1. 宽度为auto时，适应内容宽度
  2. 高度为auto时，与常规流一致，，适应内容宽度
  3. margin为auto，为0
  4. 边框、内边框、百分比设置与常规流一样

盒子排列

  1. 左浮动的盒子靠上靠左排列
  2. 右浮动的盒子靠上靠右排列
  3. 浮动盒子在包含块中排列时，会避开常规流块盒
  4. 常规流块盒在排列时，无视浮动盒子
  5. 行盒在排列时，会避开浮动盒子
  6. 外边距合并不会发生（脱离了常规流）

如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，形如p>span，该行盒叫做匿名行盒

文字环绕

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam enim aspernatur corrupti est inventore culpa assumenda error asperiores. Eveniet, delectus, saepe quibusdam id minus illum magni iste consectetur modi deleniti sunt non consequatur repellat dolorum dolorem mollitia perspiciatis et quisquam alias totam molestias aliquam veniam. Debitis voluptate, voluptatum eligendi alias suscipit maxime! Sapiente voluptatibus dicta ea a laudantium reiciendis suscipit ipsum, nisi pariatur quibusdam deserunt amet possimus! Sapiente nemo numquam totam explicabo illum ea impedit, dolor aperiam quia odit, minus quasi eius quis hic autem facilis, vel dignissimos eveniet similique sed deserunt. Nemo sint, consectetur sequi optio incidunt placeat tempora omnis atque ipsa quisquam autem quod eos voluptate necessitatibus pariatur, laboriosam expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quis voluptate doloribus, necessitatibus hic itaque error ullam. Sint vel excepturi consequatur enim, incidunt iste similique cupiditate rem, adipisci veritatis exercitationem. Sint sapiente, iste molestiae nemo maiores quod, dignissimos cum pariatur neque nobis. Neque maiores est, dolor modi nobis, officiis id amet ab eum doloribus deleniti minus ut repellat qui voluptate, in temporibus a quam illo rem quibusdam veritatis. A sapiente, repellat suscipit ab quam, quos odio laborum nostrum laudantium vel natus optio recusandae quibusdam omnis quisquam similique. Voluptate a obcaecati aperiam pariatur, nisi facilis ullam mollitia tempora porro, error, sequi fugiat ducimus consequuntur voluptas quibusdam vitae aliquid rem omnis. Voluptatem dignissimos dolor sequi voluptate quis voluptates officiis nulla neque mollitia. Vel adipisci nobis minus sapiente pariatur. Quibusdam natus exercitationem delectus veritatis quia pariatur nostrum dignissimos unde quos error, nihil molestiae reprehenderit tempore repellat quidem suscipit neque fuga! Debitis a necessitatibus ad, aspernatur voluptas, eum, impedit officiis odio illo maiores excepturi magni molestias nisi rem provident voluptatem alias totam soluta similique eaque perferendis corporis officia deleniti. Laboriosam voluptates excepturi, corporis cum molestias qui quidem ut. Non nemo, voluptate harum eius sit maiores blanditiis incidunt repellat exercitationem, cupiditate a necessitatibus, quisquam tenetur.

高度坍塌

原因：常规流盒子的自动高度计算时，不会考虑浮动盒子

解决办法1：清除浮动，css属性：clear

即，写一个元素，该元素出现在所有浮动元素最下方，让其clear：both

解决办法2：伪元素选择器

在浮动元素所在的div里加一个.clearfix的::after，撑开div

	.clearfix::after{
		content: "";
		display: block;
		clear: both;
	}
	
		.containner{
			background: lightblue;
			padding: 30px;
		}
		.item{
			width: 200px;
			height: 200px;
			background: red;
			margin: 6px;
			float: left;
		}
		.clearfix::after{
		content: "";
		display: block;
		clear: both;
	}