css float 解析学习

2020-05-12 07:32:12易采站长站整理

<div class="box1_1 fl"><span>块3</span> float:left</div>

</div>

3 .使用after伪对象清除浮动 如下图

11

代码:

<div class="box2">

<div class="box1_1 fl"><span>块1</span> float:left </div>

<div class="box1_1 fl"><span>块2</span> float:left</div>

<div class="box1_1 fl"><span>块3</span> float:left</div>

</div>

4. IE6双边距问题

·IE6双边距问题:一个居左浮动(float:left)的元素放置进一个容器盒(box),并在浮动元素上使用了左边界(margin-left) 在ie6内便产生双倍边距。如下图

12

IE7、IE8和Firefox

13 IE6

代码:

<div class="box1 hidden">
<div class="box1_1 fl mar"><span>块1</span> float:left marin_left:10px; </div>

<div class="box1_1 fl mar"><span>块2</span> float:left marin_left:10px; </div>

<div class="box1_1 fl"><span>块3</span> float:left</div>

</div>

这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间,在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样,双倍边界同样神秘地显示在居右的相同方式。

解决IE6双边距问题: display:inline; 使浮动忽略 如下图

14

代码:

<div class="box1 hidden">

<div class="box1_1 fl inmar"><span>块1</span>float:left; marin_left:10px; display:inline; </div>