css的img标签和清除浮动

100人浏览 2024-09-09 10:02:54

img的title和alt有什么区别？

    <img src="./w_1.jpg" alt="表情包" title="写信" />

title：鼠标移动上去的提示

alt: 图片加载失败时，避免用户体验不好，给的提示，比如当图片不存在时，这样显示：

清除浮动的几种方式，各自的优缺点？

浮动：脱离文档流，父元素不计算它的高度，会导致塌陷，影响后边元素的布局。

        .wrap {
            border: 1px solid fuchsia;
        }
        .box {
            width: 200px;
            background: red;
            float: left;
        }

        <div class="wrap">
            <div class="box">
                我是爱美的姑娘，关注我，每天为您分享和复习前端开发的知识点以及常见的面试题、学习的同时还可以了解最新的娱乐八卦、幽默搞笑，学习更轻松哟
            </div>
        </div>

如下图，父元素本来有一个边框的，但是由于子元素浮动了，它不会计算浮动元素的高度，就塌陷了。如果我们再继续写元素，布局就乱了，这时候就需要把这一块隔离开。不影响外边的元素，同时外边的元素也不能影响它，这时候就可以清除浮动来解决：

清除浮动的几种方式：

使用BFC，BFC计算高度的高度时候，浮动元素也参与计算，激活BFC的方式：

float的值不是none。
position的值不是static或者relative。
display的值是inline-block、table-cell、flex、table-caption或者inline-flex
overflow的值不是visible

BFC的特点：

内部的box会在垂直方向，一个接一个地放置
同一个BFC的两个相邻box的margin会发生重叠(body也是一个BFC)
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素。反之亦然。
计算BFC的高度时，浮动元素也参与计算（可用来清除浮动）。

给父元素设置：

<style>      
        .wrap {
            border: 1px solid fuchsia;
            overflow: hidden;
        }
        .box {
            width: 100px;
            background: red;
            float: left;
        }
    </style>
    <body>
        <div class="wrap">
            <div class="box">
                我是爱美的姑娘，关注我，每天为您分享和复习前端开发的知识点以及常见的面试题、学习的同时还可以了解最新的娱乐八卦、幽默搞笑，学习更轻松哟
            </div>
        </div>
    </body>

缺点： IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

使用空元素，在后面清除浮动

    <style>
        .wrap {
            border: 1px solid fuchsia;
            overflow: hidden;
        }
        .box {
            width: 100px;
            background: red;
            float: left;
        }
        .clear {
            clear: both;
        }
        .box_2 {
            width: 100px;
            height: 100px;
            background: darkblue;
        }
    </style>
    <body>
        <div class="wrap">
            <div class="box">
                我是爱美的姑娘，关注我，每天为您分享和复习前端开发的知识点以及常见的面试题、学习的同时还可以了解最新的娱乐八卦、幽默搞笑，学习更轻松哟
            </div>
        </div>
        <div class="clear"></div>
        <div class="box_2"></div>
    </body>

如下图：

缺点：会新增多余的空标签，后期维护麻烦

使用CSS的:after伪元素

    <style>
        .wrap {
            border: 1px solid fuchsia;
        }
        .box {
            width: 100px;
            background: red;
            float: left;
        }
        .wrap::after {
            content: '';
            display: block;
            clear: both;
        }
        .box_2 {
            width: 100px;
            height: 100px;
            background: darkblue;
        }
    </style>
    <body>
        <div class="wrap">
            <div class="box">
                我是爱美的姑娘，关注我，每天为您分享和复习前端开发的知识点以及常见的面试题、学习的同时还可以了解最新的娱乐八卦、幽默搞笑，学习更轻松哟
            </div>
        </div>
        <div class="box_2"></div>
    </body>