从图文混排到浮动

最新推荐文章于 2021-07-27 03:39:43 发布

李小tt

最新推荐文章于 2021-07-27 03:39:43 发布

阅读量1.5k

点赞数

分类专栏： css css布局 css浮动文章标签：浮动-float

本文链接：https://blog.csdn.net/u010250808/article/details/76652614

版权

css 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

css布局

5 篇文章 0 订阅

订阅专栏

css浮动

2 篇文章 0 订阅

订阅专栏

从图文混排到浮动

在浮动上踩过很多的坑，各种关于浮动的总结也不少，这里也就自己最近的学习谈一谈我对浮动的理解～
关于浮动最经典的莫过于图文混排了，印象中的图文混排是这样的：
这里写图片描述
为了完成这个格式，我写下了这样一段代码：

<html>
<head>
<style type="text/css">
img 
{
width:50px;
height:50px;
}
</style>
<body>
<img src="./timg.jpeg" />
<p>Hello,this is a test</p>
</body>

</html>

以上代码中包含了一张图片和一个文本段落，显示效果如下所示：
这里写图片描述

这时候发现图片和片段是从上到下排布的，咦，和我们想要的效果不同啊？这很正常，因为在代码中img标签在前，p标签在后，而这两个元素都是块级元素，因为在实际显示中，他们各占一行，垂直排列，那为了混排，需要对代码做一些改进，比如下面这样

<img src="./timg.jpeg"  align="left"/>

align属性定义了图像与文本的相互排列方式，align=left使得图片左对齐，且与紧随其后的段落混排，但这种方式有一个很大的问题，align属性在h5中已不推荐使用，最好还是通过css的方式来实现图文混排，去除align属性，为img添加其他样式，如下：

img 
{
width:50px;
height:50px;
float:left;
}

代码效果已经达到了最初想要的图文效果。
是的，我们仅仅为img添加了float属性，段落的文字便能和图片混排了，因为设置了浮动后，img元素从整个文档流中抽了出来，使得之后的p元素可以占据原来img元素的位置，但由于浮动框的存在，使得与浮动框处于同一行的行框被缩短，所以可以看到文字包裹住图片的效果，如下:
这里写图片描述

到这里之前一直有个疑惑，整段文字是由一个p元素组成的，可是这里前两行文字长度明显比最下面一行要短，那么p元素的长度到底是多少呢，究竟哪块属于p元素呢，这是可以给p元素添加背景色，使效果更清晰一些，然后再回答这个问题，添加背景色之后的效果如下：
这里写图片描述

很明显，整个黄色区域都是p元素的范围，从上至下，从左至右，因为p是块级元素，它总是充满整个父元素的宽度的，而这里前两行之所以文字区域会变短，是因为包裹文字的行框在遇到浮动元素时会变短，反之，如果文字由块级元素p包裹，则这个p元素时不会变短的，变更代码如下：

<html>
<head>
<style type="text/css">
img 
{
width:50px;
height:50px;
float:left;
}
div.outer{
background:yellow;
}
</style>
</head>

<body>
<img src="./timg.jpeg" />
<div class="outer">hello<p>Hello,this is a test。Hello,this is a test。Hello,this is a test。Hello,this is a test。Hello,this is a test。Hello,this is a test。</p>testtest</div>
</body>

</html>

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

如上图，第一个hello属于行框内容，以缩短的行框在图片右边显示，而之后的文字在p段落内，由于p段落为块级元素，要充满整个父元素的宽度，所以由于浮动元素的存在，既然不能使p段落缩短，智能把p段落挤到下边去了（侧面说明了虽然浮动元素移出了文档流，但它的存在还是会给其他元素造成不同的影响的，只是使得紧邻该浮动元素之后的元素可以占据它的位置，但包裹的内容的显示方式依据块级元素还是行内元素的不同收到浮动元素不同的影响～）

到这里，说了一段自己对浮动元素的理解，如有不妥之处，还请多多指出～
到这里还有一个问题就是，现在p段落的内容是整个包裹住图片的，但如果我既想让p段落的内容显示在img图片的右侧，又想让它布局工整，即从上到下垂直无错位的排列要怎么做呢？