CSS 清除浮动与BFC

最新推荐文章于 2024-07-17 14:19:40 发布

向刚啊

最新推荐文章于 2024-07-17 14:19:40 发布

阅读量99

点赞数

分类专栏：知识点文章标签： CSS 前端清除浮动

本文链接：https://blog.csdn.net/Diao_NickName/article/details/94612290

版权

知识点专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS 清除浮动与BFC

<style>
    img {
        float: left;
        width: 60px;
        height: 60px;
        border: 1px solid black;
    }
    .father + div {
        margin-top: -2px;
    }
</style>

<div class="father">
     <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3484939347,2764731127&fm=27&gp=0.jpg" />
     这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</div>
<div>这是另一段文字这是另一段文字这是另一段文字</div>

父级元素 div 定义伪类： after

 .father:after {
     content: '';
     display: block; // table 也可以，这里主要是需要块元素
     clear: both;
 }

在结尾处添加空 div，并设置样式 clear：both

 <div class="father">
      <img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zczAuYmRzdGF0aWMuY29tLzcwY0Z2SFNoX1ExWW54R2twb1dLMUhGNmhoeS9pdC91PTM0ODQ5MzkzNDcsMjc2NDczMTEyNyZmbT0yNyZncD0wLmpwZw" />
       这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
      <div style="clear:both"></div> <!-- 结尾加空div -->
  </div>
  <div>这是另一段文字这是另一段文字这是另一段文字</div>

经试验，这样加也行

 <div class="father">
       <img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zczAuYmRzdGF0aWMuY29tLzcwY0Z2SFNoX1ExWW54R2twb1dLMUhGNmhoeS9pdC91PTM0ODQ5MzkzNDcsMjc2NDczMTEyNyZmbT0yNyZncD0wLmpwZw" />
       这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
  </div>
  <div style="clear:both"></div> <!-- 结尾加空div -->
  <div>这是另一段文字这是另一段文字这是另一段文字</div>

BFC

BFC全称为 block formatting context，中文为“块级格式化上下文”，触发的常见情况如下：
- <html> 根元素；
- float 的值不为 none；
- overflow 的值为 auto、scroll 或 hidden；
- display 的值为 table-cell、table-caption 和 inline-block 中的任何一个；
- position 的值不为 relative和 static。

在这个例子里，只需要给 .father 加上 overflow:hidden 就可以了

向刚啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 清除浮动与BFC

CSS 清除浮动与BFC<style> img { float: left; width: 60px; height: 60px; border: 1px solid black; } .father + div { margin-top: -2px; }</sty...
复制链接

扫一扫