6.1 float的本质与特性
浮动的本质是为了实现文字环绕效果
float特性:
- 包裹性(eg:父元素宽200px,子元素为宽128px的图片,此时表现出包裹;子元素宽超过200px,则自适应父元素宽度,最终为200px)(包裹自适应两部分组成)
- 块状化并格式化上下文(块状化:一旦float属性值不为none,其display计算值为block或者table)
- 破坏文档流
没有任何margin合并
tips:不要用text-align属性控制浮动元素的左右对齐,对块级元素是无效的。
float浮动机制:float属性的作用之一就是使父元素高度坍塌(这不是bug)。行框盒子和浮动元素不可重叠(行框盒子如果和浮动元素的垂直高度有重叠,则行框盒子在正常定位状态下只会跟随浮动元素,不会发生重叠)可以看个有趣例子
6.2 float与流体布局
借助float特性,可以实现两栏或多栏自适应布局
一侧定宽的两栏自适应布局:
eg:.father{
overflow:hidden;
}
.father > img{
width:60px;
height:64px;
float:left;
}
.animal{
margin-left:70px;
}
如果宽度不固定,用百分比宽度也ok
中间居中的左中右布局:
eg:<div class="box">
<a href="#" class="prev">上一章</a>
<a href="#" class="next">下一章</a>
<h3 class="title">疯狂动物城</h3>
</div>
.prev{float:left;}
.next{float:right;}
.title{margin:0 70px;text-align:center;}
6.3 clear属性
元素盒子的边不能和前面的浮动元素相邻
tips:凡是用clear:left或clear:right的地方均可以用clear:both替换(clear对"后面的"浮动元素是不闻不问的)
clear属性只有块级元素才有效,因此在使用::after清除浮动时要设置display
.clear{
content="";
display:table(也可以是block/list-item);
clear:both;
}
6.4 BFC
block formatting context 块级格式化上下文
内部子元素不会影响到外部的元素
触发BFC的情况:
- 根元素
- float的值不为none
- overflow的值为auto,scroll,hidden
- display的值为table-cell、table-caption、inline-block中的任意一个
position的值不为relative和static
元素符合上面任意一个条件,无需使用clear:both清除浮动
普通流体元素在设置了overflow:hidden后,会自动填满容器中除浮动元素以外的剩余空间,形成自适应布局效果
与基于纯流体特性实现的两栏或多栏布局相比,基于BFC布局的优点:1)自适应内容由于封闭而更健壮,容错性更强 2)自适应内容自动填满浮动以外区域,无需关心浮动元素宽度
能担任自适应布局重任的:
- overflow:auto/hidden,适用IE7以上版本
- display:inline-block,适用于IE6和IE7
display:table-cell,适用于IE8及以上版本
6.5 overflow与锚点定位
实现锚点跳转方法:1)a标签以及name属性 2)利用标签的id属性
锚点定位的触发条件:1)URL地址中的锚链与锚点元素对应并有交互行为 2)可focus的锚点元素处于focus状态
使用锚点定位来实现选项卡切换效果 戳这里 不足之处:1)容器高度需要固定 2)"由内而外"的锚点定位会触发窗体的重定位,若页面也是可以滚动的,则点击按钮后页面会发生跳动
$("label.click").removeAttr("for").on("click",function(){
$(".box").scrollTop(xxx);
)};
来自张鑫旭大大的《css世界》学习笔记--- about float
原文:https://www.cnblogs.com/helen-papa/p/9487296.html