CSS-定位5-清楚浮動

1、CSS浮動產生原因

一般是一個盒子里使用了CSS float浮動屬性,導致父級對象盒子不能被撐開,這樣CSS float浮動就產生了。

2、CSS浮動影響

1、背景不能顯示
??由于浮動產生,如果對父級設置了(CSS background背景)CSS背景顏色或CSS背景圖片,而父級不能被撐開,所以導致CSS背景不能顯示。
2、邊框不能撐開
??如上圖中,如果父級設置了CSS邊框屬性(css border),由于子級里使用了float屬性,產生浮動,父級不能被撐開,導致邊框不能隨內容而被撐開。
3、margin padding設置值不能正確顯示
??由于浮動導致父級子級之間設置了css padding、css margin屬性的值不能正確表達。特別是上下邊的padding和margin不能正確顯示。

3、清除浮動影響的方法

(1)使用clear屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動高度塌陷</title>
    <style type="text/css">
    *{
        margin:0px;
        padding: 0px;
    }
    .left{
        width: 100px;
        height: 100px;
        background: red;
        float: left;
    }
    .right{
        width: 100px;
        height: 100px;
        background: blue;
        float: right;
    }
    .wrap{
        background: gray;
        border: 1px solid yellow;
        width: 500px;
        margin:20px auto;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

運行效果:


清楚浮動前

使用clear:both 清楚浮動

  <div class="wrap">
        <div class="left"></div>
        <div class="right"></div>
        <div style="clear: both"></div>
    </div>

運行效果:


清楚浮動后

(2)使父元素BFC
??給父wrap元素添加 overflow:hidden屬性,使其產生BFC。運行效果與clear:both 效果相同。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,807評論 1 92
  • relative:生成相對定位的元素,通過top,bottom,left,right的位置相對于其正常位置進行定位...
    zx9426閱讀 966評論 0 2
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表,主要用...
    寥寥十一閱讀 1,875評論 0 6
  • 浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響? 特征: 浮動元素會脫離正常的文檔流,元...
    饑人谷_哈嚕嚕閱讀 897評論 0 0
  • 讀的什么書:《搞定》第一章 閱讀有效時間:一個半小時 閱讀中遇到了什么困難:無 閱讀有什么收獲:讀了第一章,知道橫...
    墨蘭七七閱讀 180評論 0 0