解决float属性影响后续元素排版的问题

最新推荐文章于 2023-07-20 11:01:37 发布

Xaire

最新推荐文章于 2023-07-20 11:01:37 发布

阅读量1.7k

点赞数

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/u012183426/article/details/99731899

版权

CSS 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何解决浮动元素对后续元素排版的影响，包括在元素后面添加带有clear:both属性的div来使后续元素另起一行显示，以及针对早期IE版本中float元素margin-left双倍的bug，通过添加display:inline属性来修复。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：解决后续元素不会另起行显示：
1.在该元素后面新加div
2.并设置clear:both属性

二：早期版本的IE在float中的BUG：
       1.块元素
       2.float: left;
       3.margin-left不为0
       margin-left会double
       解决办法是：让第一个float：left的元素添加display: inline属性
       -->

Demo:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           body, div{
               padding: 0;
               margin: 0;
           }
           #div1 {
               float: left;
               margin-left: 10px;
               margin-top: 10px;
               width: 100px;
               height: 100px;
               background-color: red;
               display: inline; /*only for 低版本IE*/
           }

           #div2 {
               float: left;
               margin-left: 10px;
               margin-top: 10px;
               width: 150px;
               height: 100px;
               background-color: goldenrod;
           }

           #div3 {
               width: 100px;
               height: 100px;
               background-color: yellow;
               margin-left: 10px;
               margin-top: 10px;
           }
           .clear{
               clear: both;/*在chrome中：让第后续块元素新起一行显示*/
           }
       </style>
   </head>
   <body>
       <div id="div1">div1</div>
       <div id="div2">div2</div>
       
       <div class="clear"></div>
       
       <div id="div3" >div3</div>
   </body>
</html>