CSS中float用法详解
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">float浮动</a></li><li><a href="#_label1">消除浮动</a></li></ul></div><p class="maodian"><a name="_label0"></a></p><h2>float浮动</h2><ul><li>指将指定元素悬浮于所在整体之上，即将垂直排列的元素转换为水平同行显示</li><li>平时写出的HTML是具有先后顺序的，对于这个顺序我们称之为标准流</li><li>而浮动则是脱离标准流的另一个独立标准</li><li>下面给出float定义：</li></ul>
<div class="jb51code"><pre class="brush:css;">float:left 左浮动
float:right 右浮动
float:none 无浮动</pre></div>
<ul><li>设置两个div1，div2相邻盒子左浮动时，div1与div2在同一行，div2在div1的右侧。但当宽度超过一行的限制时，div2会默认转到div1的下一行。</li><li>看代码：</li></ul>
<div class="jb51code"><pre class="brush:css;">#d1{
width:100px;
height:100px;
background-color:green;
float:left;
}
#d2{
width:200px;
height:100px;
background-color:red;
float:left;
}
------------------------------
<body>
<div id="d1">div1</div>
<div id="d2">div2</div>
</body></pre></div>
<p>效果如图所示：</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202310/20231018165250108.png" /></p>
<p>设置为右浮动时效果如图：</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202310/20231018165250109.png" /></p>
<ul><li>此时div1靠近右侧边沿，div2跟随在div1后面</li><li>当div1设置浮动而div2未设置浮动时，div2会有一部分被div1覆盖掉并且div2占据页面左上角，此时div2是处于标准流之中</li><li>如图所示：</li></ul>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202310/20231018165250110.png" /></p>
<ul><li>反之当div1未设置浮动div2设置左浮动，即div1处于标准流，则div2将会另起一行紧贴在div1的下面</li><li>如图所示：</li></ul>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202310/20231018165250111.png" /></p>
<p class="maodian"><a name="_label1"></a></p><h2>消除浮动</h2>
<ul><li>常用的消除浮动的方法-----clear</li><li>clear的属性值及定义如下：</li></ul>
<div class="jb51code"><pre class="brush:css;">float:left; 消除左浮动
float:right; 消除右浮动
float:both; 消除全部浮动</pre></div>
<ul><li>使用时需要注意：clear的设置必须是针对某一盒子之外的浮动设置，但如果本盒子也设置了浮动则不会对本盒子消除。</li><li>而且消除浮动，并不是指被消除的浮动不起作用，只是说我所消除的浮动对当前盒子的位置不影响了</li><li>如图所示，div1位于div2前面，那么消除div2的左侧浮动则会使div2也贴着左侧边栏</li></ul>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202310/20231018165250112.png" /></p>
<p>消除浮动后如图所示：</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202310/20231018165250113.png" /></p>
頁:
[1]