<!--
浮动主要用于排版、让文字围绕浮动元素等
float
left 向左浮动
right 向右浮动
none 不浮动
clear
left 元素左边不允许存在浮动元素
right 元素右边不允许存在浮动元素
both 元素两边不允许存在浮动元素
注：img的clear样式需自身处于浮动状态才生效
-->
代码段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
浮动主要用于排版、让文字围绕浮动元素等
float
left 向左浮动
right 向右浮动
none 不浮动
clear
left 元素左边不允许存在浮动元素
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;
}解决父级边框塌陷问题之后的运行效果
扫一扫
961
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
