浮動影響

zhaofeihao 發布于2019-08-29 13:01 / 1200人閱讀

摘要：四包含關系的盒子，可能情況里面盒子浮動，包住它的盒子不浮動時，父盒子背景無顯示原因由于元素浮動后脫離了文檔流，所以父元素是無法根據元素來自適應的。

一、浮動元素自動變塊級元素

非浮動元素占據浮動元素位置，浮動元素不能占據非浮動元素位置？？？向上占據

浮動元素會被自動設置成塊級元素，相當于給元素設置了display:block（塊級元素能設置寬和高，而行內元素則不可以）。

 

浮動元素span
 
 
 

非浮動元素span

二、并列關系的盒子，不一致地浮動，位置問題

元素浮動會對后面非浮動的兄弟元素產生影響

可能情況

后邊若是非浮動行內元素，且因為定位產生重疊時，行內盒子模型壓在該浮動元素之上

后邊若是非浮動塊級元素，且在定位后產生重疊時，該塊級的內容圍繞該浮動元素顯示，其他在該浮動元素底下

示例代碼如下：

 

 
    浮動DIV
 

 
    跟在浮動元素后邊的DIV
 

 
    跟在浮動元素后邊的span

效果如下

不過在ie6這個效果卻很怪異，如圖：

浮動元素沒有壓在非浮動div之上，反而把span壓住了。

解決辦法

對被浮動影響的元素添加clear:both

三、并列關系的盒子，一致地同方向浮動，高度不一致問題

多個同方向浮動元素一般是按照流式布局，一行滿了則自動換行，也就是類似于以下效果：

但各個浮動元素高度不一致的話效果很可能出現下邊的情況：

原因

主要排列到元素7的時候，一行已經顯示不下了，所以要換行，但此處換行并不是從行頭開始，而是從元素5那開始，因為元素5比元素6高很多導致。

四、包含關系的盒子， 可能情況

里面盒子浮動，包住它的盒子不浮動時，父盒子背景無顯示

原因

由于元素浮動后脫離了文檔流，所以父元素是無法根據元素來自適應的。

解決辦法1 clear:both 用法

在所有浮動元素后加:

 
TEST DIV

（1）有clear:both的：

（2）無clear:both的

原理

子元素浮動后，因為脫離文檔流，所以父元素包含不住，無法撐開。由于沒有現有的元素可以應用清理，所以我們只能添加一個空元素并且清理它。

解決辦法2 overflow 用法




    div1
    div2

原理

在父元素上設置overflow這個屬性，如果父元素的這個屬性設置為auto或者是hidden，父元素就會擴展包含浮動，這個方法有著比較好的語義性，因為它不需要額外的元素，但是，要記住一點，overflow屬性不是為了清除浮動而定義的，要小心不要覆蓋住內容或者觸發了不需要的滾動條。

解決辦法3 clearfix類 用法

 



    div1
    div2

原理：

這種方式這樣理解，就是利用偽類元素，也就是在有浮動的標簽前面添加一個塊級元素，來達到效果。

GPU云服務器云服務器 html浮動的影響 html浮動向上浮動上下浮動左右浮動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112305.html

css浮動的理解

摘要：浮動的理解什么是浮動概念浮動是指的是的屬性。對于設置了浮動的元素，在頁面效果上可以通俗的理解為這個元素漂起來了在水上，位置發生變化，不按代碼中排列。關于浮動，后續會總結以下消除浮動影響的相關內容。 css浮動的理解什么是浮動概念浮動是指的是css的屬性float。對于設置了浮動的元素，在頁面效果上可以通俗的理解為這個元素漂起來了（在水上），位置發生變化，不按HTML代碼中排列。從...

WilsonLiu95 2019-08-29 14:13 評論0 收藏0
帶你徹底了解CSS浮動（文字整理版）

摘要：謝老板謝然最近在講堂上開了一個視頻課程帶你徹底掌握浮動，因為視頻比較長分鐘，不方便回顧，我將之做了一個整理，并從我自己理解的角度進行了闡述，以做記錄。相應的背景文檔浮動結語以上就是謝老板在視頻中的內容，希望幫助到大家。謝老板（謝然）最近在segmentfault講堂上開了一個視頻課程《帶你徹底掌握CSS浮動》，因為視頻比較長（69分鐘），不方便回顧，我將之做了一個整理，并從我自己理解...

AlphaWatch 2019-08-29 14:09 評論0 收藏0
理解CSS浮動與清理

摘要：浮動為什么會有文本環繞效果產生這個疑問主要來自于以往的印象浮動的元素是脫離文檔流的。也就是說，浮動元素的確脫離了文檔流，因此文檔流中的塊框會無視浮動的元素，但是文本不會。作為前端寫了很多頁面布局，但是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現很多布局，另一方面浮動造成的影響又會破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點。本文主要討論以下幾個問題：1.浮動的原始用途...

Tonny 2019-08-29 12:23 評論0 收藏0
理解CSS浮動與清理

摘要：浮動為什么會有文本環繞效果產生這個疑問主要來自于以往的印象浮動的元素是脫離文檔流的。也就是說，浮動元素的確脫離了文檔流，因此文檔流中的塊框會無視浮動的元素，但是文本不會。作為前端寫了很多頁面布局，但是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現很多布局，另一方面浮動造成的影響又會破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點。本文主要討論以下幾個問題：1.浮動的原始用途...

cyqian 2019-08-01 16:39 評論0 收藏0
為什么設置overflow為hidden可以清除浮動帶來的影響

摘要：以下情況會觸發根元素的值不為的值為，，的值為，和中的任何一個的值不為和顯然我們在設置值為時使元素具有，那么子元素浮動便不會帶來父元素的高度坍塌影響。1.問題起源　　　　在平時的業務開發寫CSS中，為了滿足頁面布局，元素的浮動特性我們用的不能再多了。使用浮動的確能夠解決一些布局問題，但是也帶了一些副作用影響，比如，父元素高度塌陷，我們有好幾種可以清除浮動的方法，最常用的就是設置父元素的ove...

JeOam 2019-04-23 13:09 評論0 收藏0