css浮動中常遇的五個問題是什么

這篇文章將為大家詳細講解有關css浮動中常遇的五個問題是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

CSS“Floats”（浮動元素）使用起來很簡單，但一旦使用，它對周圍元素的影響有時會變得不可預測。如果你曾經遇到過附近元素消失或浮動元素的問題，不要再擔心了。這篇文章涵蓋了五個基本問題，可以幫助您成為浮動元素的專家。

1、哪些元素不浮動？

2、浮動時元素會發生什么？

3、“Floats”的同級元素會怎么樣？

4、“Float”的父元素會怎么樣？

5、你如何清除“Float”？

1.哪些元素不浮動？

絕對或固定定位的元素將不會浮動。因此，下次遇到無法正常運行的浮動時，請檢查它是否能在position:absolute或者相應地position:fixed處更改。

2.元素浮動時會發生什么？

當元素被標記為“浮動”時，它基本上都是向左或向右浮動，直到它碰到其容器元素的邊界。或者，它會一直運行，直到它碰到另一個已經撞到同一邊界的浮動元素。它們會一直堆積起來，直到空間耗盡，而新的傳入將會向下移動。

浮動元素在代碼中也不會浮動到的元素上面，有時候你需要在編寫一個“浮動”之前考慮后一個元素要浮起來的一面。

以下是浮動元素發生的另外兩件事，具體取決于浮動元素的類型：

（1）內聯元素 在浮動時將變為塊級元素。

有沒有想過為什么突然你能夠為浮動分配高度和寬度span？這是因為浮動時的所有元素都將獲得block其display屬性（inline-table將獲得table）的值，從而使它們成為塊級元素。

（2）未指定寬度的塊元素將在浮動時自適應其內容。

通常，如果未指定塊元素的寬度，則其寬度為默認值100％。但是，當浮動時，情況就不再如此; 塊元素的框將縮小，直到其內容保持可見。

3、“Floats”的同級元素會怎么樣？

當你決定在一堆元素中浮動一個元素時，不要擔心它會如何表現，它的行為將是可預測的，并且會向左或向右移動。你真正應該考慮的是同級元素之后的行為方式。

“Floats”擁有全世界最好的同級元素。他們將盡其所能來容納浮動元素。

該文本和內聯元素只會讓路“Floats”，它的位置是將圍繞“浮動”元素，

該塊元素會縮小位置，將自己包裹圍繞一個“浮動”元素，即使這意味著要踢出自己的子元素，以便跟隨“浮動”的空間。

我們在實驗中查看一下。下面是一個藍色的框，后面是一個相同大小的紅色框，帶有一些子元素。

<div id="blue">
</div>
<div id="red">
  <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-people-outline-64.png" alt="" />
</div>

#blue{
  background: blue;  
}
#red{
  background: red;
}
div{
  width: 100px;
  height: 100px;
}

效果如下：

現在，讓我們浮動藍色框，看看紅色框及其子框件會發生什么。

<div id="blue">
</div>
<div id="red">
  <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-people-outline-64.png" alt="" />
</div>

#blue{
  background: blue;  
  float: left;
}
#red{
  background: red;
}
div{
  width: 100px;
  height: 100px;
}

一旦紅色框停止圍繞藍色框并且你可以使用overflow:hidden讓一切好起來。

當你添加overflow:hidden到一個已經包裝浮動的元素時，它將停止這樣做。請參閱下面紅框的行為方式overflow:hidden。

<div id="blue">
</div>
<div id="red">
  <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-people-outline-64.png" alt="" />
</div>

#blue{
  background: blue;  
  float: left;
}
#red{
  background: red;
  overflow: hidden;
}
div{
  width: 100px;
  height: 100px;
}

效果如下：

<div id="container">


  <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Pied_Kingfisher_%28Ceryle_rudis%29.jpg/180px-Pied_Kingfisher_%28Ceryle_rudis%29.jpg">

  <p>The pied kingfisher (Ceryle rudis) is a water kingfisher and is found widely distributed across Africa and Asia. Its black and white plumage, crest and the habit of hovering over clear lakes and rivers before diving for fish makes it distinctive. Males
    have a double band across the breast while females have a single gorget that is often broken in the middle. They are usually found in pairs or small family parties. When perched, they often bob their head and flick up their tail.</p>
</div>

img {
  float: left;
  margin-right: 4px;
}
p {
  overflow: hidden;
}
#container {
  width: 500px;
  font-family: cambria;
}

效果如下：

4、“Float”的父元素會怎么樣？

父元素不關心他們的“漂浮”子元素，除了他們不應該離開他們的左邊界或右邊界。

通常，未指定高度的塊元素會增加其高度以容納其子元素，但“Float”子元素不是這種情況。如果“浮動”大小增加，其父級將不會相應地增加其高度。這可以通過overflow:hidden在父元素中使用來解決。

<div class="parents">
  Parent Div
  <div class="children" >Child Div (100&times;100)</div>
</div>
<br />
<div class="parents">
  Parent Div
  <div class="children" style="float:left">Floating Child Div (100&times;100)</div>
</div>

.parents{
  background: yellow;
  font-family:cambria;
}
.children{
  width: 100px;
  height: 100px;
  background: pink;
}

效果如下：

5.如何清除“浮動”？

我已經提到過使用overflow:hidden父元素的一個高度方式容納一個浮動的子元素，同時在“Float”之后為其他元素創建正確的空間，并阻止同級元素包裹“Floats”。

這就是你如何使一個元素靠近“浮動”而不妥協的方式。

還有另一種方法，即元素甚至不會靠近“Float”的同級元素。通過使用該clear屬性，您可以使元素不受“浮動”附近的影響。

clear: left;
clear: right;
clear: both;

leftvalue清除元素左側的所有“Floats”，反之亦然right，兩側為both。clear根據您的方便，此屬性可以在兄弟，空div或偽元素上使用。

關于css浮動中常遇的五個問題是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。