码迷,mamicode.com
首页 > Web开发 > 详细

CSS清除浮动的方法】

时间:2019-09-22 01:32:16      阅读:101      评论:0      收藏:0      [点我收藏+]

标签:table   固定   display   nbsp   float   isp   伪类   text   soft   

CSS清除浮动

1.在浮动的元素上,定义父元素,然后再父元素上加固定高height。

 

<style type="text/css">
/*方法一*/
.div1 {
  width: 500px;

 

  /*在浮动的元素上,定义父元素,然后再父元素上加固定高height。*/
  height:200px;

 

}

 

.box1,
.box2 {
  width: 100px;
  height: 100px;
  background: red;
  margin-left: 10px;

 

  float: left;
}

 

.div2 {
  width: 500px;
  height: 200px;
  background: green;
}

 

</style>

 

<div class="div1">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</div>

 

<div class="div2">
div2
</div>

 

 

2.在浮动的结尾处加空div标签 clear:both。

3.父级div定义 伪类:after 和 zoom。

4.父级div定义 overflow:hidden。

5.父级div也一起浮动。

6.父级div定义display:table。

 

CSS清除浮动的方法】

标签:table   固定   display   nbsp   float   isp   伪类   text   soft   

原文地址:https://www.cnblogs.com/start-bigin/p/11562858.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!