浮动清除

最新推荐文章于 2024-04-29 16:58:49 发布

Luxd0412

最新推荐文章于 2024-04-29 16:58:49 发布

阅读量231

点赞数

分类专栏： web前端文章标签： css 清除浮动

本文链接：https://blog.csdn.net/qq_32524751/article/details/74786055

版权

web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

浮动清除

参考链接：http://www.iyunlu.com/view/css-xhtml/55.html。（转载）

个人认为这一篇讲的很好。

什么是浮动、浮动带来的后果、清除浮动的作用

参考链接：
http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html（转）讲的挺通俗易懂的，这里就不再说明。需要注意的点有以下：

对于css的清除浮动（clear)，要记住这个规则只对使用清除的元素本身有影响，不能影响其他元素

清除浮动的几种方法

清除css浮动

方法一：添加新的元素，应用clear:both

如下：

html代码：

<body>
   <div class="outer">
      <div id="class1">
      </div>
      <div id="class2">
      </div>
      <div id="class3">
      </div>
      <div class="fix">

      </div>

   </div>
 </body>

css代码：

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin:50px auto; padding: 50px;} #class1{width:80px;height:80px;background:red;float:left;}   #class2{width:80px;height:80px;background:yellow;float:left;}

#class3{width:80px;height:80px;background:blue;float:left;}

.fix{clear:both;height: 0;line-height: 0;font-size:0;}

方法二：父级div定义overflow:auto

比如以方法一中的div为例，父级div也就是div.outer

html代码如下：

<div class="outer over-flow">  //加多一个类
      <div id="class1">
      </div>
      <div id="class2">
      </div>
      <div id="class3">
      </div>

   </div>

css代码新增

.over-flow{
 overflow:auto;zoom:1;
}

方法三：after方法

这种方法相对比较好，其结构和语义化完全正确，代码量居中。

html代码如下：

<div class="outer over-flow">  //加多一个类       
     <div id="class1">
     </div>
     <div id="class2">
     </div>       
     <div id="class3">
     </div>
</div>

css代码如下：

.outer:after{clear:both;content:'.';display: block;width: 0;height: 0;visibility: hidden;}

Luxd0412

关注

0
点赞
踩
0

收藏

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

浮动清除参考链接：http://www.iyunlu.com/view/css-xhtml/55.html。（转载）个人认为这一篇讲的很好。什么是浮动、浮动带来的后果、清除浮动的作用参考链接： http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html（转）讲的挺通俗易懂的，这里就不再说明。需要注意的点有以下：对于css的
复制链接

扫一扫

专栏目录