css如何實(shí)現(xiàn)清算

小編給大家分享一下css如何實(shí)現(xiàn)清算，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

因?yàn)闆](méi)有現(xiàn)有的元素大要應(yīng)用清算，以是咱們只能添加一個(gè)空元素而且清理它。

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

多么大約實(shí)現(xiàn)我們祈望的造詣，可是需要增進(jìn)過(guò)剩的代碼。常常有元素大概使用 clear，但是有時(shí)辰不能不為了進(jìn)行機(jī)關(guān)而增長(zhǎng)無(wú)含意的標(biāo)記。

不外我們另有另外一種方式，那等于對(duì)容器 div 進(jìn)行浮動(dòng)：

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

何等會(huì)失掉咱們巴望的成績(jī)。倒楣的是，下一個(gè)元素會(huì)遭到這個(gè)浮動(dòng)元素的影響。為了希圖這個(gè)題目，有些人決定對(duì)結(jié)構(gòu)中的所有工具發(fā)展浮動(dòng)，而后使用適合的居心義的元素（常常是站點(diǎn)的頁(yè)腳）對(duì)這些浮動(dòng)進(jìn)行清理。這有助于削減或消除不消要的標(biāo)識(shí)表記標(biāo)幟。

結(jié)果上，W3School 站點(diǎn)上的一切頁(yè)面都采用了這種武藝，要是您掀開(kāi)咱們使用 CSS 文件，您會(huì)看到我們對(duì)頁(yè)腳的 div 進(jìn)行了清算，而頁(yè)腳下面的三個(gè) div 都向左浮動(dòng)。

以上是“css如何實(shí)現(xiàn)清算”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！