三种清除浮动的样式方法案例教程附带代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- </head>
- <body>
- <style>
- .one {
- /* overflow: hidden; 第一种方法*/
- width: 500px;
- border: 1px solid red;
- }
-
- .damao {
- float: left;
- width: 200px;
- height: 200px;
- background-color: pink;
- }
-
- .ermao {
- float: left;
- width: 250px;
- height: 200px;
- background-color: #c5c;
- }
-
- .clearfix:after {
- content: "";
- display: block;
- height: 0;
- visibility: hidden;
- clear: both;
- }
-
- .clearfix {
- zoom: 1;
- /*第二种方法 ie6,7 专I ]清除浮动的样式*/
- }
-
- .two {
- width: 200px;
- height: 200px;
- background-color: black;
- }
- </style>
- <div class="one clearfix">
- <div class="damao"></div>
- <div class="ermao"></div>
- </div>
- <!-- <div style="clear: both;"></div> 第三种方法-->
- <div class="two">
- </div>
- </body>
- </html>
复制代码
|
|