HTML5基础加强css样式篇（float补充，清除浮动解决高度塌陷问题，定位补充）（一）

最新推荐文章于 2023-10-12 23:01:42 发布

咸鸭蛋炒饭

最新推荐文章于 2023-10-12 23:01:42 发布

阅读量766

点赞数

分类专栏： HTML5基础篇文章标签： html5 经验 html

本文链接：https://blog.csdn.net/u010853130/article/details/60129521

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.float补充：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
     #box1,#box2,#box3{
         width: 100px;
         height: 100px;
         float: left;
     }
      #box1{
         background-color: red;
      }
     #box2{
      background-color: green;
         /*
         给兄弟元素设置清除左浮动浮动使前一个元素的右边没有浮动元素
         清除浮动主要用于解决高度塌陷问题
         */
         /*clear: left;*/
        /*//清除浮动简单方式*/
         /*clear: both;*/

     }
     #box3{
         /*clear: left;*/
         background-color: blue;
     }
    </style>
</head>
<body>

   <div id="box">
       <div id="box1"></div>
       <div id="box2"></div>
       <div id="box3"></div>
   </div>

</body>
</html>

2：清除浮动解决高度塌陷问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
     #box{
         width: 500px;
         background-color: aqua;
     }
     /*
     给父元素设置个伪元素，设置如下可以解决高度塌陷，没有复作用，使用  overflow: hidden; 有复作用
     */
     #box:after{
         content: "";
         display: block;
         clear: both;

     }
     #box1,#box2,#box3{
         width: 100px;
         height: 100px;
         float: left;
     }
      #box1{
         background-color: red;
      }
     #box2{
      background-color: green;
         /*
         给兄弟元素设置清除左浮动浮动使前一个元素的右边没有浮动元素
         清除浮动主要用于解决高度塌陷问题
         */
         /*clear: left;*/
        /*//清除浮动简单方式*/
         /*clear: both;*/

     }
     #box3{
         /*clear: left;*/
         background-color: blue;
     }
    </style>
</head>
<body>

   <div id="box">
       <div id="box1"></div>
       <div id="box2"></div>
       <div id="box3"></div>
   </div>

</body>
</html>

3.定位补充：