HTML中使用float怎么布局

本篇內容主要講解“HTML中使用float怎么布局”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“HTML中使用float怎么布局”吧!

　　1、使用float來實現內容環繞

　　html代碼：

　　<divclass="demo">

　　<h2>浮動--文字環繞</h2>

　　<divclass="box_left">向左浮動</div>

　　<p>此文本位于浮動盒子（.box_left）之后的正常段落中。該段可以看作是淺綠色的盒子。請注意，此輪廓延伸到浮動div的后面。這很重要，因為這意味著段落的左側實際上位于頁面的左側。只是該段落的內容已經向右移動，以“繞過”浮動的DIV。如果你試圖操縱與浮點相鄰的段落一側的邊距或填充，則會產生影響。</p>

　　<divclass="box_right">向右浮動</div>

　　<p>現在我們添加第二段并用內容充實它。你應該看到，一旦覆蓋了div的高度，此段落文本將環繞它，以便文本不再縮進。類似的效果可在html通過設置來實現。</p>

　　<p>float屬性的一個復雜因素是InternetExplorer將在浮動的div盒子和后面的文本之間添加一些填充像素。這在標準中沒有位置，只是他們“弱化”CSS和HTML的方式。在其他瀏覽器中，段落文本將與浮動的DIV對接。如果要在所有瀏覽器中填充，則需要為浮動元素指定邊距。</p>

　　</div>

　　css代碼：

　　.demo{

　　width:520px;

　　overflow:hidden;

　　border:2pxsolidpaleturquoise;

　　padding:10px;

　　margin:100pxauto;

　　}

　　.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;

　　}

到此，相信大家對“HTML中使用float怎么布局”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！