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怎么布局”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

分享名称：HTML中使用float怎么布局
转载来源：https://www.cdcxhl.com/article20/jdipco.html

成都网站建设公司_创新互联，为您提供品牌网站建设、网站排名、网站建设、移动网站建设、网站营销、App开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联