bfc和float注意点
bfc和float注意点
boogoogle 发表于12个月前
bfc和float注意点
  • 发表于 12个月前
  • 阅读 12
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

伪类和伪元素不同:

 - div:after   
 - a:hover

padding 和margin的布局

- padding-top: 50%;  --二者都是以"父元素"的"宽度"为参照取百分比
- padding-left: 50%;

- margin-top: 30%;   -- 二者都是以"父元素"的"高度"为参照百分比
- margin-left: 30%;

清除浮动的原理:

- 普通文档流,
- float属性的元素脱离了当前父元素的普通流,不能撑起父元素高度了,
    - .clearfix
- 如果这时候设置了父元素为bfc,也可以撑起来,因为计算bfc高度的时候,浮动元素也参与计算
- bfc的元素本身仍然在普通流中
BFC:
- 形成bfc的元素,其内部的"块级元素"会形成一个新的普通文档流,内部元素浮动不会影响外面的布局
- 内部块级元素会占据一行,且子元素的"左外边距(margin-left)"紧贴着父元素的"左内间距(padding-left)"

- float: 定义元素往哪个方向浮动
	- 脱离了标准文档流,所以若其父元素已然形成bfc,要注意其兄弟元素是以块级元素排列,本身仍然要根据普通文档流的标准布局,
	- 以往应用于图像,使文本"环绕"在图像周围
	- 任何元素都可以浮动,浮动的元素会形成一个bfc,不论它本身是何种元素
	- 对于浮动的内联元素,需要指明一个明确的宽度,否则,他们会尽可能的窄

- *zoom:1 触发ie67的hasLayout闭合浮动

clearfix

-  这里最主要的是clear:both
- clear:left 意思是: 如果“我自身”的左边元素是float:left的,那么我就到下一行去(因为块级元素要自己占一行);如果它右边紧挨着一个float:right的,就需要clear:both了估计,要根据实际情况,所以一般都用:both
- 
·
.clearfix:{*zoom:1}
.clearfix: after{
    content: '';
    clear: both;
    display: block;
    visibility: hidden;
   }
·

哪些元素能够形成bfc

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 10
博文 89
码字总数 26075
×
boogoogle
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: