前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新! 文档流的概念:html中block块元素默认是单独占据一行的,从上到下排列,也就是我们说的文档流;脱离文档流的概念:A元素定义了float属性之后,就会"浮"起来 ...
前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!
文档流的概念:html中block块元素默认是单独占据一行的,从上到下排列,也就是我们说的文档流;
脱离文档流的概念:A元素定义了float属性之后,就会"浮"起来,原来占据的空间由后面的B元素占据;
如果浮动起来的A元素和B元素发生重叠,浮动起来的A元素就会覆盖B元素;
浮动元素具有内联元素的特性,不在单独占据一行,相邻的浮动元素,最前面的具有left属性值的排在最左边,最前面的具有right属性值的排在最右边;
当多个浮动元素一排容不下时,就换行;
浮动会带来各种布局问题,主要是父容器塌陷(子元素在父元素外面,影响后面的布局),也就有各种解决方案,利用clear属性清除浮动或者使父容器形成BFC;
1. 利用clear:both清除浮动
在浮动元素后面在创建一个空的非浮动的div(inline元素不可以),并赋予属性clear:both;
实际应用中我们更多采用:after伪元素加在父容器上来清除浮动,定义一个clearfix的class,然后给它添加一个:after伪元素,它会在父容器的内容最后面在添加一个看不见的块元素,我们给它定义clear:both;
/* 清除浮动 */.clearfix:after { content: ''; display: block; height: 0; clear: both; font-size: 0; visibility: hidden;}.clearfix { /*触发hasLayout,这又涉及到IE浏览器hack的知识*/ zoom: 1;}
原标题:学习有关浮动和BFC的整理转述
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。