使用float（浮動）可以如何佈局？本篇文章就為大家介紹利用float（浮動）來如何佈局內容。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
在之前的文章【float是什麼？ float屬性詳解】中介紹了float屬性是什麼，為什麼要有浮動等等知識，大家感興趣的，可以參考一下。下面我們透過浮動佈局的範例，來看看float來如何佈局內容。
1、使用float來實作內容環繞
html程式碼：
<div class="demo"> <h1>浮动--文字环绕</h1> <div class="box_left">向左浮动</div> <p>此文本位于浮动盒子（.box_left）之后的正常段落中。该段可以看作是浅绿色的盒子。请注意，此轮廓延伸 到浮动div的 后面。这很重要，因为这意味着段落的左侧实际上位于页面的左侧。只是该段落的内容已经向右移动，以“绕过”浮动的DIV。如果你试图操纵与浮点相邻的段落一侧的边距或 填充，则会产生影响。</p> <div class="box_right">向右浮动</div> <p>现在我们添加第二段并用内容充实它。你应该看到，一旦覆盖了div的高度，此段落文本将环绕它，以便文本不再缩进。类似的效果可在html通过设置来实现。</p> <p>float属性的一个复杂因素是Internet Explorer将在浮动的div盒子和后面的文本之间添加一些填充像素。这在标准中没有位置，只是他们“弱化”CSS和HTML的方式。在其他浏览器中，段落文本将与浮动的DIV对接。如果要在所有浏览器中填充，则需要为浮动元素指定边距。</p> </div>
css程式碼：
##
.demo {
width: 520px;
overflow: hidden;
border: 2px solid paleturquoise;
padding: 10px;
margin: 100px auto;
}
.box_left {
float: left;
margin-right: 15px;
width: 150px;
height: 100px;
border-radius: 5px;
background-color: rgb(207, 232, 220);
padding: 1em;
}
.box_right {
float: right;
margin-left: 15px;
width: 150px;
height: 100px;
border-radius: 5px;
background-color: rgb(207, 232, 220);
padding: 1em;
}2、使用'clear'強制內容通過浮動
使用float佈局內容時常見的錯誤是忘記添加清除。這是對浮動內容之後的元素的指令，讓元素向下移動足夠遠的距離，使其不受前面浮動內容的影響。 當float元素後面的「正常」內容不足以清除它時，就會出現元素上移的問題。 在這種情況下，你可能會看到後續部分的標題生效，甚至內容溢出頁面的「內容」部分。這是因為浮動的內容被“從文件流中取出”，因此不會強制任何包含框在頁面上向下擴展。 當沒有其他元素存在時，強制容器在浮動內容周圍展開的最佳方法是插入一個空的div，其中clear設定為'both'，如下所示：<div style="max-width:90%"></div>
<div class="demo"> <h1>浮动--文字环绕</h1> <div class="box_left">向左浮动</div> <p>此文本位于浮动盒子（.box_left）之后的正常段落中。该段可以看作是浅绿色的盒子。请注意，此轮廓延伸 到浮动div的 后面。这很重要，因为这意味着段落的左侧实际上位于页面的左侧。只是该段落的内容已经向右移动，以“绕过”浮动的DIV。如果你试图操纵与浮点相邻的段落一侧的边距或 填充，则会产生影响。</p> <div class="box_right">向右浮动</div> <p>现在我们添加第二段并用内容充实它。你应该看到，一旦覆盖了div的高度，此段落文本将环绕它，以便文本不再缩进。类似的效果可在html通过设置来实现。</p> <div style="clear: both;"></div> <p>float属性的一个复杂因素是Internet Explorer将在浮动的div盒子和后面的文本之间添加一些填充像素。这在标准中没有位置，只是他们“弱化”CSS和HTML的方式。在其他浏览器中，段落文本将与浮动的DIV对接。如果要在所有浏览器中填充，则需要为浮动元素指定边距。</p> </div>
#3、使用浮動將內容分成列
html程式碼：<div class="demo"> <div class="box_1"> <p>第一列</p> <p>float的一个稍微不常见属性但有非常强大的用途，可以将内容分组为列。这可以通过将div向左浮动以形成左侧列，然后添加第二个div来完成，同时向左浮动以位于其旁边。每个DIV必须具有宽度，你可以向第一个DIV添加右边距以分隔列。在许多情况下，这使得TABLE元素的使用变得不必要。</p> </div> <div class="box_2"> <p>第一列</p> <div style="width: 100px;height: 50px;border: 1px solid #000;"></div> <p>你可以看到此框中的内容与第一个段落相邻，并且与第一个示例不同，一旦清除了第一个浮点的高度，它就不会回绕。</p> </div> <div>使用这种布局，你必须记住在最后一个DIV之后添加一个清除，否则后续内容可以出现在两列中和周围。</div> </div>
.demo {
width: 800px;
overflow: hidden;
border: 2px solid paleturquoise;
padding: 10px;
margin: 100px auto;
}
.box_1 {
float: left;
margin-right: 15px;
width: 200px;
height: 310px;
border-radius: 5px;
background-color: rgb(207, 232, 220);
padding: 1em;
}
.box_2 {
float: left;
margin-left: 15px;
width: 200px;
height: 310px;
border-radius: 5px;
background-color: rgb(207, 232, 220);
padding: 1em;
}
現在我們來看一些應該簡單但實際上非常複雜的東西。如果你有很多小DIV - 例如照片庫中的照片 - 你只需將它們全部浮動到一側就可以創建一個簡單的頁面。
當要浮動的物品都具有相同的高度時，這非常有效：
注意：重新載入此頁面以查看其他配置。
如果是這種情況，那麼最安全的選擇是使用table表格進行佈局。在某些情況下，您可以透過在每個第n個元素插入clear =「left」來避免這種情況 ，但在新增或刪除項目時可能難以維護。
總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。
以上是使用float（浮動）如何佈局？浮動佈局的範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
