css清除浮動

時間 2019-11-30

標籤 css 清除浮動欄目 CSS 简体版

原文原文鏈接

css中的float：css

float:left 左浮動html

float:right 右浮動瀏覽器

float:none 不浮動spa

float:inherit 繼承浮動(繼承父元素浮動屬性，若是父元素無浮動屬性，inherit失效)code

浮動產生哪些問題：1.父元素塌陷，沒有高度。2.網頁中的臨近元素出現異位htm

清除浮動的幾種方法：blog

1.手動給父元素添加高度缺點：若是子元素過多且數量不肯定，設置較爲複雜。繼承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮動</title>
    <style type="text/css">
  /*給父級元素添加高度 */
  *{
    padding:0;
    margin:0;
  }
   .news {
   background-color: red;
   border: solid 1px black;
   height:200px;   /*設置高度，若是去掉高度元素塌陷*/      
    } 

 .news img {
  float: left;
  }

 .news p {
  float: right;
  }
  
    </style>
</head>
<body>
  <div class="news">
    <img src="1.jpg" />
    <p>some text</p>
  </div>
</body>
</html>

2.用clear屬性it

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮動</title>
    <style type="text/css">
  /* 清除浮動 clear*/
  *{
    margin:0;
    padding:0;
  }
.news {
  background-color: red;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

 .content{
  clear:both;/*兩邊都清除浮動*/
  } 
    </style>
</head>
<body>
 
<div class="news">
<img src="1.jpg" />
<p>some text</p>
<div class="content"></div>
</div>
</body>
</html>

3.給父元素添加overflow屬性並結合zoom:1使用class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮動</title>
    <style type="text/css">
    /* 給父級元素添加overflow:hidden; */
    *{
         margin:0;
         padding: 0;
     }
 .news {
  background-color: red;
  border: solid 1px black;
  overflow: hidden; /*溢出隱藏*/
  zoom:1;/*兼容IE瀏覽器*/
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }
    </style>
</head>
<body>
    <div class="news">
    <img src="1.jpg" />
    <p>some text</p>
</div>
</body>
</html>

4.給父級元素添加浮動缺點：相鄰元素位置異常

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮動</title>
    <style type="text/css">
  /* 給父級元素添加浮動 */
  *{
    margin:0;
    padding:0;
  }
 .news {
  background-color: red;
  border: solid 1px black;
  float: left;  /* 給父級元素添加浮動 */
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }
    </style>
</head>
<body>
    <div class="news">
    <img src="1.jpg" />
    <p>some text</p>
</div>
</body>
</html>

5.使用:after僞元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮動</title>
    <style type="text/css">
  /* 使用僞元素：after添加浮動 */
  *{
    margin:0;
    padding:0;
  }
 .news {
  background-color: red;
  border: solid 1px black;
    }

.news img {
  float: left;
  }

.news p {
  float: right;
  }
  .clearfix:after{
    content: "\0020";/*在父容器的結尾處放一個空白字符*/
    display: block;
    height: 0; /*讓這個空白字符不顯示出來*/
    clear: both;
  }
  /* 兼容IE6和IE7,觸發haslayout */
  .clearfix{
    zoom:1; 
  } 
    </style>
</head>
<body>
    <div class="news clearfix">
    <img src="1.jpg" />
    <p>some text</p>
</div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。