css-float

2018-07-08 121 阅读1分钟

float元素特性：

包裹性；
块状化并格式化上下文；
破坏文档流；
没有任何margin合并。

设置clear属性的元素盒子的边不能和前面的浮动元素相邻，clear只对块级元素有效；

因此，可以利用after伪元素清除浮动：

div:after{
    content:'';
    display:block;
    clear:both
}

其他清除浮动的方法：

overflow:auto/scroll/hiddden;
display:inline-block/table;

超智能的左侧定宽，右侧自适应布局：

	<div class="box">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	.left{
		float: left;
		width: 100px;
		height: 100px;
		background-color: red;
	}
	.right{
		height: 100px;
		overflow: hidden;
		background-color: green;
	}

效果如下：