css浮动与BFC

float设计的初衷源于实现文字环绕效果,打破文档流。
浮动会使元素脱离原有的文档流,在父级容器中浮动,会产生类似PS里面分层的效果。如下:

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>123</title>
<style type="text/css">
.par {
        border: 5px solid #fcc;
        width: 300px;
    }

    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
    }
</style>
</head>
<body>
   <div class="par">
        <div class="child"></div>
        <p>这是一个方块</p>
    </div>
</body>
</html>

以上代码只要添加一个浮动,就会变成文字环绕效果。

    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float:left;
    }

但是随着浮动会带来父级元素高度的塌陷这个问题。这个时候需要使用一定的方法去清除浮动。清楚浮动的实质是实现父级元素BFC。
产生BFC只需满足一下条件之一即可:
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed。
因为:
内部的Box会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定。(完整的说法是:属于同一个BFC的两个相邻Box的margin会发生重叠,与方向无关。)
每个元素的左外边距与包含块的左边界相接触(从左向右),即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块,而position为absolute的元素可以超出他的包含块边界)
BFC的区域不会与float的元素区域重叠
计算BFC的高度时,浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值