关于CSS中设置浮动所遇到的问题

关于CSS中设置浮动所遇到的问题

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（绝对定位中并不脱离文档流）。

float的值：

left

表明元素必须浮动在其所在的块容器左侧的关键字。

right

表明元素必须浮动在其所在的块容器右侧的关键字。

none

表明元素不进行浮动的关键字。

inline-start

关键字，表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。

inline-end

关键字，表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。

拓展： direction属性，用来定义文本流的书写方向，可选值有ltr|rtl，默认值为 ltr。ltr（left-to-right）表示文本流从左到右书写，rtl（right-to-left）表示文本流从右到左书写。

如何清除浮动（常用）

方法一：给父元素添加高度

方法二：给父元素添加 overflow:hidden/auto

方法三：使用伪元素（推荐使用 ）

<div class="box1">
        <div class="items">元素1</div>
        <div class="items">元素2</div>
        <div class="items">元素3</div>
</div>
<div class="box2">
        <div class="items">元素4</div>
        <div class="items">元素5</div>
        <div class="items">元素6</div>
</div>

.box1 {
            background-color: blue;
            *zoom: 1;		// 用于兼容IE6
        }
        .box1::after {	// 添加伪元素，在box1后添加一个不显示的空元素
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }
        .box1 .items {
            background-color: yellow;
        }
        .box2 {
            background-color: red;
        }
        .box2 .items {
            background-color: green;
        }
        .items {
            float: left;
            width: 200px;
        }

页面显示如下

方式四：给父元素结尾处空标签添加 clean:both

这种方法较为简洁，但是会造成第二个盒子元素的margin-top属性无效。

<div class="box1">
        <div class="items">元素1</div>
        <div class="items">元素2</div>
        <div class="items">元素3</div>
        <div style="clear:both"></div>
</div>
<div class="box2">
        <div class="items">元素4</div>
        <div class="items">元素5</div>
        <div class="items">元素6</div>
</div>

页面效果跟上图一样

在设置浮动时所遇到的一个问题

<div class="pic">
        <div class="top">
            <img src="./img/4.jpg" alt="">
        </div>
        <div class="box"></div>
</div>

*{
        padding: 0;
        margin: 0;
    }
    .pic{
        width: 800px;
        height: 500px;
        background-color: blue;
    }
    .box{
        width: 200px;
        height: 200px;
        float: right;
        background-color: brown;
    }

页面效果如下

这时我们可能会产生一个疑问，问什么红色方块为什么不浮动在父元素div的右上角覆盖图片呢？

这是因为元素浮动的一个特性，当子元素在父元素中浮动时且浮动元素上方还有一个块级元素，这时浮动元素只会在它所在的行上进行浮动，并不会往上跑。加大父元素的宽度也是如此，如下图。

此时若将图片所在div设置display:inlne-block，红色方块将会与此div占据同一行，如下图。

这是由于设置浮动后，使红色方块的display属性为inline-block，行元素的可在同一行排列，所以红色方块与图片div在同一行。

但是在缩小父元素的宽度后，图片与div也不能重叠，这是因为图片div的display属性都为inline-block,创建了BFC，根据BFC的特性，BFC的区域不会与float box重叠，所以并不能覆盖图片。

注：有关BFC的详解，可参考我另一篇博客。https://blog.csdn.net/Msinwln/article/details/106729386