CSS 基础学习-138 css使用 clearfix设置清除浮动布局溢出

由 hrs, 30 十月, 2021

实例代码：

<!doctype html>
<html>
  <head>
    <head>
      <meta charset="utf-8">
      <style>
        div{
          border:3px solid green;
          width:600px;
          height:200px;
          padding:5px;
        }
        .img1{
          width:200px;
          height:200px;
          float:right;
        }
        .d1{
          clear:both;/*清除底部浮动*/
          display:table;
        }
        .img2{
          width:200px;
          height:200px;
          float:right;
        }
      </style>
    </head>
  </head>
  <body>
    <p>在本例中，图像高于包含它的元素，然而它被浮动了，所以它会在容器之外溢出。</p>
      <div>
        <h1>Without Clearfix</h1>
        <img class="img1" src="img/tree.png"></img>
        Lorem ipsum dolor sit amet ,consectetur adipiscing elit .Phasellus imperdiet,nulla et dictum interdum...
    </div>
    <p style="clear:right">请为包含元素添加clearfix hack ,以解决此问题：</p>
    <div class="d1">
        <h1>With Clearfix</h1>
        <img class="img2" src="img/tree.png"></img>
 Lorem ipsum dolor sit amet ,consectetur adipiscing elit .Phasellus imperdiet,nulla et dictum interdum...
    </div>
  </body>
</html>

运行效果：

css-138.png

标签

评论