<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#parent{
width: 408px;
/*方式一 height: 102px; */
border: solid 1px green;
margin: 0 auto;
overflow: hidden;
}
#parent .child{
width: 100px;
height: 100px;
border: dashed 1px #ccc;
float: left;
}
.news{
width: 308px;
border: solid 1px red;
overflow: hidden;
margin-bottom: 8px;
}
.fl{
float:left;
}
.fr{
float: right;
}
img{
width: 118px;
}
p{
width: 178px;
padding: 2px;
margin: 4px 4px 0px 4px;
}
</style>
</head>
<body>
<div id="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<!-- 第二种方式 添加一个清楚浮动的元素 <div style="clear: left;"></div> -->
</div>
<div class="news">
<img class="fl" src="img/mv.png" alt="">
<p class="fr"> 使用:不管是浏览器窗口还是标签自身都可以构建坐标系，统一以左上角为原点，向右向下为X轴和Y轴的正方向</p>
</div>
<div class="news">
<img class="fr" src="img/mv.png" alt="">
<p class="fl"> 使用:不管是浏览器窗口还是标签自身都可以构建坐标系，统一以左上角为原点，向右向下为X轴和Y轴的正方向</p>
</div>
</body>
</html>
