十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
本篇内容主要讲解“HTML中使用float怎么布局”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML中使用float怎么布局”吧!
创新互联,专注为中小企业提供官网建设、营销型网站制作、响应式网站建设、展示型成都做网站、成都网站制作等服务,帮助中小企业通过网站体现价值、有效益。帮助企业快速建站、解决网站建设与网站营销推广问题。
1、使用float来实现内容环绕
html代码:
此文本位于浮动盒子(.box_left)之后的正常段落中。该段可以看作是浅绿色的盒子。请注意,此轮廓延伸到浮动div的后面。这很重要,因为这意味着段落的左侧实际上位于页面的左侧。只是该段落的内容已经向右移动,以“绕过”浮动的DIV。如果你试图操纵与浮点相邻的段落一侧的边距或填充,则会产生影响。
现在我们添加第二段并用内容充实它。你应该看到,一旦覆盖了div的高度,此段落文本将环绕它,以便文本不再缩进。类似的效果可在html通过设置来实现。
float属性的一个复杂因素是InternetExplorer将在浮动的div盒子和后面的文本之间添加一些填充像素。这在标准中没有位置,只是他们“弱化”CSS和HTML的方式。在其他浏览器中,段落文本将与浮动的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怎么布局”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!