CSS 基础学习-152 css使用overflow:auto自动溢出对元素进行布局

由 hrs, 11 十一月, 2021

使用overflow:auto自动溢出对元素进行布局

实例代码；

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      .d1{
        border:3px solid brown;
        width:600px;
        padding:10px;
      }
      .m1{
        width:150px;
        height:150px;
        float:right;
      }
      .d2{
        border:3px solid brown;
        overflow:auto;
        width:600px;
        padding:10px;
      }
      .m2{
        width:150px;
        height:150px;
        float:right;
      }
    </style>
  </head>
  <body>
    <h1>Clearfix hack</h1>
    <p>在本例中，图像高于包含它的元素，然而它被浮动了，所以它会在容器之外溢出：</p>
    <div class="d1"><img class="m1" src="img/flower-4.jpg"></img>Lorem ipsum dolor sit amet ,consectetur adipiscing elit.Phasellus imperdiet,nulla et dictum interdum...</div>
    <p style="clear:right;">请为包含元素添加一个带有overflow:auto;的clearfix类，以解决此问题：</p>
    <div class="d2"><img class="m2" src="img/flower-4.jpg"></img>Lorem ipsum     dolor sit amet ,consectetur adipiscing elit.Phasellus imperdiet,nulla et di    ctum interdum...</div>
  </body>
</html>

运行效果：

css-152.png

标签

评论