We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。
高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷)
因为浮动会脱离文档流,使高度自适应的父元素高度塌陷,这样就会让布局错乱,所以在必要的时候需要清除浮动,让后面的元素能够正常布局,不会和浮动的元素相重叠。
一般会用到clear样式
clear:left | right | both | none | inherit // 元素的某个方向上不能有浮动元素 clear:both // 在左右两侧均不允许浮动元素。
{clear:both;height:0;overflow:hidden;}
给浮动元素父级设置高度
以浮制浮(父级同时浮动)
嗯,这算是个基本没人用的蛋疼方法
{display: inline-block}
这就用到了bfc了
<div class="box"> <div class="top"></div> <br clear="both" /> </div>
br 标签自带clear属性,将它设置成both其实和添加空div原理是一样的。
{overflow:hidden}
这也是用了bfc了
.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;} .clear{zoom:1;}
The text was updated successfully, but these errors were encountered:
No branches or pull requests
块格式化上下文
清除浮动
浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。
高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷)
因为浮动会脱离文档流,使高度自适应的父元素高度塌陷,这样就会让布局错乱,所以在必要的时候需要清除浮动,让后面的元素能够正常布局,不会和浮动的元素相重叠。
一般会用到clear样式
给浮动元素父级设置高度
以浮制浮(父级同时浮动)
这就用到了bfc了
br 标签自带clear属性,将它设置成both其实和添加空div原理是一样的。
这也是用了bfc了
The text was updated successfully, but these errors were encountered: