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如何布局" 就介绍到这。希望大家多多支持编程宝库。

本文主要介绍"CSS选择器有哪些类型" 有关的知识，希望能够解决您遇到有关问题，下面我们一起来看看这篇 "CSS选择器有哪些类型" 文章。 　　我们先看一段代码: 　　<!DOCTYPEhtml> 　　& ...