CSS

<!--
浮动主要用于排版、让文字围绕浮动元素等
floatleft 向左浮动right 向右浮动none 不浮动
clearleft 元素左边不允许存在浮动元素right 元素右边不允许存在浮动元素both 元素两边不允许存在浮动元素注：img的clear样式需自身处于浮动状态才生效
-->

代码段

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--浮动主要用于排版、让文字围绕浮动元素等floatleft 向左浮动right 向右浮动none 不浮动clearleft 元素左边不允许存在浮动元素right 元素右边不允许存在浮动元素both 元素两边不允许存在浮动元素段落在不浮动的情况下符合 图片往往需要自身浮动才符合--><style>div{border: 1px solid cornflowerblue;}#img1{float: left;}#img2{float: right;}#img3{float: right;clear:both;}</style>
</head>
<body>
<div><img src="image/图片.png" height="480" width="549" id="img1"/><img src="image/还是图片.png" height="249" width="288" id="img2"/><img src="image/依旧是图片.png" height="300" width="272" id="img3"/><p>风回小院庭芜绿，柳眼春相续。凭阑半日独无言，依旧竹声新月似当年。笙歌未散尊罍在，池面冰初解。烛明香暗画堂深，满鬓青霜残雪思难任。</p>
</div></body>
</html>

运行效果 

解决父级元素边框塌陷问题

01.

<!--手动修改父级元素边框高度-->

02.

<!--在浮动元素后方添加一个空div标签-->
<!--注：该div标签需要与浮动元素同处于一个父级元素下-->
<!--空div标签-->
<div id="clear"></div>
<!--样式-->
#clear{clear: both;margin: 0;padding: 0;
}

03.

<!--在父级标签样式中添加overflow: hidden--><!--关于overflow-->
<!--hidden 内容溢出时会被修剪，并且其余内容是不可见的-->
<!--scroll 内容溢出时会被修剪，但是浏览器会显示滚动条以便查看其余的内容（一定会出现滚动条）-->
<!--auto   如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容--><!--想要进行切割就必须要获得父级元素div的高度来作为分界线-->
<!--但由于父级元素div中未指明元素高度，故高度由内容决定，即切割位置总与实际高度相等-->
<!--所以最终在获得了分界线的同时也未进行实际切割-->

04.

<!--为父类元素添加伪类-->
<!--样式-->
div:after{content: '';display: block;clear: both;
}

解决父级边框塌陷问题之后的运行效果