CSS浮动

最新推荐文章于 2024-09-09 22:16:15 发布

小白在努力！

最新推荐文章于 2024-09-09 22:16:15 发布

阅读量90

点赞数

分类专栏： HTML CSS 文章标签： html

本文链接：https://blog.csdn.net/giserhfbuie/article/details/114780315

版权

HTML 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

浮动float 练习：

浮动是为了消除间隙，浮动后要对块级元素消除浮动，这样才能对齐切其他标签不变形。

<html>
    <head>
      <style>
         .a{
         border:5px solid rgb(219, 21, 21);
         font-size: xx-large;
         font-family: sans-serif;
         float: left;/*向左浮动*/
         }
         #d::after{
           content: "";
           display: block;/*注意：div原本是块级元素，因为向左浮动，就变成行内元素，所以这里要变为块级元素*/
           CLEAR:left;
         }
       </style>
    </head>
    <body><!--注意：A与A之间有空隙，这里需要用到浮动float，这样就可以消除空隙了-->
       <div id="d" style="border:5px solid black">
        <span class="a">A</span>
        <span class="a">A</span>
        <br>
    </div>
    </body>
 </html>