如何清除浮动？

最新推荐文章于 2024-08-18 23:31:20 发布

雄霸是也

最新推荐文章于 2024-08-18 23:31:20 发布

阅读量356

点赞数

分类专栏： css、css3 文章标签： css css3

本文链接：https://blog.csdn.net/shortlived/article/details/122913003

版权

css、css3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

未清除浮动的影响

父级元素因为子级浮动引起的内部高度为0
父级元素的兄弟元素高度为0，其他样式也不能实现

代码

<body>
  <div class="father">
    <div class="child1">child1</div>
    <div class="child2">child2</div>
  </div>
  <div class="friend">friend</div>
</body>

.child1,.child2,.friend{
  width:50px;
  height:50px;
}

.child1{
  float:left;
  border:1px solid blue;
}

.child2{
  float:left;
  border:1px solid green;
}

.friend{
  border:1px solid red;
}

.father{
  border:1px solid black;
}

方法1：给父元素加上 .clearfix

代码

<body>
  <div class="father clearfix">
    <div class="child1">child1</div>
    <div class="child2">child2</div>
  </div>
  <div class="friend">friend</div>
</body>

.child1,.child2,.friend{
  width:50px;
  height:50px;
}

.child1{
  float:left;
  border:1px solid blue;
}

.child2{
  float:left;
  border:1px solid green;
}

.friend{
  border:1px solid red;
}

.father{
  border:1px solid black;
}

.clearfix:after{
     content: '';
     display: block; /*或者 table*/
     clear: both;
 }
.clearfix{
  zoom: 1; /* IE 兼容*/
}

效果图

方法2：给父元素加上 overflow:hidden

代码

<body>
  <div class="father">
    <div class="child1">child1</div>
    <div class="child2">child2</div>
  </div>
  <div class="friend">friend</div>
</body>

.child1,.child2,.friend{
  width:50px;
  height:50px;
}

.child1{
  float:left;
  border:1px solid blue;
}

.child2{
  float:left;
  border:1px solid green;
}

.friend{
  border:1px solid red;
}

.father{
  border:1px solid black;
  overflow:hidden
}

效果图

雄霸是也

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何清除浮动？

未清除浮动的影响父级元素因为子级浮动引起的内部高度为0父级元素的兄弟元素高度为0，其他样式也不能实现代码<body> <div class="father"> <div class="child1">child1</div> <div class="child2">child2</div> </div> <div class="friend">friend</d
复制链接

扫一扫

专栏目录