CSS 图片浮动导致页面无垂直拓展

来源：互联网发布：为知笔记有道云笔记编辑：程序博客网时间：2024/06/02 04:14

编写图片和文字横向排列的页面，当图片不是此div的结束标签时，div无法做到以图片大小自适应页面高度，而是以最后的文段为拓展延伸标准。（在div有背景颜色，或后面内容要对齐时造成影响）

<body>    <div class="all">        <h1>这是我的标题啦</h1>        <img src="img/1.jpg" />        <p>只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落</p>        <p>只是段落段落只是段落段落只是段落段落只是段落段落只是段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落只是段落段落</p>    </div></body>

页面的html如上

@charset "utf-8";body{    margin: 30px;    background-color: #ccc;}.all{    width: 90%;    background-color: #ffffff;    margin: 0 auto;  /*水平居中（左右）*/}

页面的CSS如上

这里写图片描述

页面效果如上

当我们需要使图片和文段横向排列时，使用浮动float样式。

.all img{    float: left;}

这里写图片描述

页面效果如上

做到了浮动，文段围绕图片。但是页面类为 all 的 div 无法垂直延伸，白色区域没有覆盖到图片。

原因：div 以内部最后一个标签为标准设置默认高度，当文段作为最后标签，div 无法自适应图片的高度。

解决方案：
清除浮动
1、当后面有标签时，给后面的标签，清除浮动。例如当有另一个标题时，可以清除浮动，而不再围绕图片。
2、当后面没有标签时，添加一个空白div标签可命名class为spacer，并为此清除浮动。即可

<div class="spacer"></div>

html 如上

.all .spacer{    clear: left;}

CSS 如上
这里写图片描述

效果如图

当我们需要多个图片文段排列时

效果图如下：
这里写图片描述

可以在h2处清除浮动
CSS如下：

.all h2{    clear: left;  /*清除浮动*/    padding-top: 20px;    padding-left: 10px;}

注意：最后一个仍需要添加一个空白div使页面垂直延伸

.all .spacer{    clear: left;}

如有建议和疑问可联系
QQ：1017386624
邮箱：1017386624@qq.com

阅读全文

0 0