b. 对于运用浮动属性的元素,其父级和兄弟级别的元素会对它产生干扰;
先直接使用html代码,其效果就是三行排列的段落;然后再逐行代码进行渲染,当第一行和第四行CSS代码渲染完后,我们会发现段落呈横向排列而且所有的段落不在其父元素.site-nav中。其效果如下图所示:
上图中黄色的部分表示.site-nav的部分,而三个段落都不在其中。从这可以看出使用了浮动元素后元素不会占据文档流的位置,而且其父元素的高度变为0。对于这样的状况,需要清除浮动元素的影响,具体来说就是需要在浮动元素后添加clear:both;属性来消除其影响。
