一.標(biāo)準(zhǔn)文檔流：指元素根據(jù)塊元素或行內(nèi)元素的特性按從上到下，從左到右的方式自然排列。這也是元素默認(rèn)的排列方式

??二.display屬性

???display:更改塊級元素和行內(nèi)元素的相互轉(zhuǎn)換
??????????? block：塊級元素的默認(rèn)值
??????????? inline：行內(nèi)元素的默認(rèn)值
??????????? inline-block:同時具有行內(nèi)和塊級元素的特性
??????????? none：隱藏元素內(nèi)容

??????? 三.float浮動

??????? ?left?元素向左浮動
???right?元素向右浮動
???none?默認(rèn)值。元素不浮動，并會顯示在其文本中出現(xiàn)的位置
???<style type="text/css">
????.layer01{
?????float: left;
????}
????.layer02{
?????float: right;
????}

???</style>

??四.clear清除浮動

???left?在左側(cè)不允許浮動元素
???right?在右側(cè)不允許浮動元素
???both?在左、右兩側(cè)不允許浮動元素
???none?默認(rèn)值。允許浮動元素出現(xiàn)在兩側(cè)
???<style type="text/css">
????.layer01{
?????clear:left;
????}
????.layer01{
?????clear:right;
????}
????.layer01{
?????clear:both;
????}
???</style>

??五.解決父級邊框塌陷的方法

???1.浮動元素后面加空div
????<div class="layer05">
????<style type="text/css">
?????.layer05{
??????clear: both;
?????}

????</style>

???2.設(shè)置父元素的高度
????<style type="text/css">
?????#father{
??????height: 500px;
?????}
????</style>

???3.父級添加overflow屬性
????visible?默認(rèn)值。內(nèi)容不會被修剪，會呈現(xiàn)在盒子之外
????hidden?內(nèi)容會被修剪，并且其余內(nèi)容是不可見的
????scroll?內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余內(nèi)容
????auto?如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容
????<style type="text/css">
?????#father{
??????overflow: hidden;
?????}
????</style>

???4.父級添加偽類after
????<div id="father" class="clear"></div>
????<style type="text/css">
?????.clear:after{
???????? content: '';????????? /*在clear類后面添加內(nèi)容為空*/
???????? display: block;????? /*把添加的內(nèi)容轉(zhuǎn)化為塊元素*/
???????? clear: both;???????? /*清除這個元素兩邊的浮動*/
?????}
????</style>

??六.inline-block和float的區(qū)別

???display:inline-block
???可以讓元素排在一行，并且支持寬度和高度，代碼實(shí)現(xiàn)起來方便
???位置方向不可控制，會解析空格
???IE 6、IE 7上不支持
???float
???可以讓元素排在一行并且支持寬度和高度，可以決定排列方向
???float 浮動以后元素脫離文檔流，會對周圍元素產(chǎn)生影響，必須在它的父級上添加清除浮動的樣式

?

轉(zhuǎn)載于:https://www.cnblogs.com/1314Justin/p/9206997.html

總結(jié)

以上是生活随笔為你收集整理的CSS3中的浮动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。