clear:both屬性怎么在CSS中使用

這篇文章給大家介紹 clear:both屬性怎么在CSS中使用，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

clear:both用來清除浮動這是一直來的印象，但是自己很少會用這個，理解其實也不太正確，今天查查了資料，記錄一下

float的脫離文檔流

float的原始作用是為了實現文字環繞的作用，可以理解為部分脫離文檔流。

CSS中說脫離文檔流是指盒子從普通的布局排版中拿出來，其他盒子進行放置時，會當其不存在而進行布局。而脫離文檔流分為兩種

• 完全脫離文檔流：例如position:absolute，使用絕對定位的盒子，其他盒子無論是其本身還是里面的任何元素都會無視這個絕對定位的盒子進行布局。

• 部分脫離文檔流：即float盒子，使用float屬性后，其他block盒子會無視float盒子進行布局，但是其他盒子內的inline元素和inline-block元素依舊會為這個浮動的盒子讓出位置。

clear:both

clear:both是作用于添加屬性的盒子本身的

在一個盒子上添加clear:both意味著這個盒子的頂邊框將會低于在它之前的任何浮動盒子的底外邊距。

所以clear:both并不是清除浮動，而是清除浮動所造成的影響，浮動的盒子依舊是部分脫離文檔流的。

而clear的取值是left還是right,在我看來是取決于想要低于的那個浮動盒子的浮動方向。而both的取值，則會低于所有在在它之前的任何浮動盒子

清除影響的例子

我們設置三個盒子A、B、C

當三個盒子都左浮動是時：

C設置不浮動時：

給B添加clear:both/clear:left：

可以看到，B本身造成的浮動影響被清除了，他的頂邊框在任何在他之前的浮動盒子的底部之下,但是沒有浮動的盒子C仍然在AB的下邊，其中的字體為浮動的盒子讓出了位置。

給父盒子添加偽元素::after

現在，我們用一個div（class:box）包裹住ABC三個盒子，在box之外添加一個盒子out,其中ABC、out全部設置了浮動。現在他們長這樣：

去掉out的浮動：

這是理所當然的。

給box添加一個偽元素

.box::after{
  clear: both;
  height:10px;
  width:10px;
  background:yellow;
  display: block;
  content: "";
}

現在外盒子out的浮動影響被清除了，但是這不是因為clear:both清除了浮動，而是因為after偽元素本身的浮動影響清除了，它現在處于任何在它之前的浮動盒子的下面，這也使得box的高度不再塌陷，所以out現在只是處于box下面，這是正常的文檔流。

關于 clear:both屬性怎么在CSS中使用就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。