CSS学习--浮动

float

指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除。

float: left | right | none | inline-start | inline-end;
.left {
	float: left;
	background: pink;
}

clear

清除浮动指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。

clear: left | right | both | none | inline-start | inline-end;
.right {
	border: 1px solid black;
	clear: right;
}

清除浮动

clear-float1: after + zoom

/* IE6-IE7 */
.parent {
  zoom: 1;
}

/* IE8以上 + !IE */
/* IE8以上和非IE浏览器才支持:after */
.parent:after {
  display: block;
  clear: both;
  content: '';
  visibility: hidden;
  height: 0;
}

clear-float2: 末尾 br + clear

.parent br:last-child {
  display: block;
  clear: both;
  content: '';
  visibility: hidden;
  height: 0;
}

clear-float3: 末尾空 div + clear

.parent div:last-child {
  display: block;
  clear: both;
  content: '';
  visibility: hidden;
  height: 0;
}

clear-float4: 父级 div 定高

.parent {
  height: 200px;
}

clear-float5: 父级 div 定宽 + 溢出隐藏或滚动

必须定义 width 或 zoom:1，同时不能定义 height，使用 overflow:hidden | auto 时，浏览器会自动检查浮动区域的高度

.parent {
  width: 98%;
  overflow: hidden;
  /* overflow: auto; */
}

clear-float6: 父级 div 浮动

.parent {
  width: 99%;
  float: left;
}
.div2 {
  clear: both;
}

clear-float7: 父级 table 布局

.parent {
  width: 99%;
  display: table;
}