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

来源：互联网发布：手机ip修改软件编辑：程序博客网时间：2024/05/23 23:06

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.定位补充：

0 0