html浮动代码_浅谈html元素的float属性

浅谈html元素的float属性

作者 周东毅

在web网页制作的工作中，元素的float属性非常常用。顾名思义float属性就是浮动的意思，运用了浮动属性的元素常称为浮动元素。我们经常使用元素浮动属性来控制网页的结构以及制作一些酷炫的效果。但是这个属性具有难以把握的特点，下面逐条进行说明：

a. 运用了这种属性的元素会对该元素自身的行为和表现有影响；

b. 对于运用浮动属性的元素，其父级和兄弟级别的元素会对它产生干扰；

c. 浮动元素对其包含或者包含它的元素也会有影响。

对于上面所说的内容我将通过一个在我工作中遇到的问题作为例子进行说明，首先我将所用到的代码展示如下：

先直接使用html代码，其效果就是三行排列的段落；然后再逐行代码进行渲染，当第一行和第四行CSS代码渲染完后，我们会发现段落呈横向排列而且所有的段落不在其父元素.site-nav中。其效果如下图所示：

上图中黄色的部分表示.site-nav的部分，而三个段落都不在其中。从这可以看出使用了浮动元素后元素不会占据文档流的位置，而且其父元素的高度变为0。对于这样的状况，需要清除浮动元素的影响，具体来说就是需要在浮动元素后添加clear:both;属性来消除其影响。