浮动,为了把内容可以横向排列。
float:left | right | none;
每个水平排列的版块,都要浮动!!因为浮动标签不占位!!
因此要清除浮动,防止页面混乱
clear:none | left | right | both ;
常用清除浮动方法:
html:<div class="clears"><\div>
css: .clears{ clear: both;height: 0; line-height: 0; overflow: hidden; font-size:0; }
浮动时,要注意顺序!特别是多张图片在一排时。
(多列,一般左浮动,顺序要排列正确)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="CSS/public.css">
<link rel="stylesheet" href="CSS/fdstyle.css">
</head>
<body>
<div class="floatclass">
<div class="title">
<img src="img/title.jpg"alt="标题" >
</div>
<div class="word">
<div class="word_title">
重庆泷邦盛汇科技有限公司
</div>
<p class="content">重庆泷邦盛汇科技有限公司成立于2014年,以移动互联网产品研发与市场推广,及新型企业投资为主体的企业。旗下拥有华夏消费商平台,微信摇周边等平台。</p>
<p class="content">信息时代的经济竞争是以消费者为核心,作为一个有眼光和能力的消费者就有必要把自己身边的消费者组织起来,带领大家一起与生产商享财富分配。助人达成目标,创业成就梦想。泷邦盛汇做资源整合者,找到更多的优惠的消费渠道,帮助更多的消费者成为消费商,并且成就他们的创业梦想。</p>
<div class="word_kuang">
查看详情
</div>
</div>
<div class="tu">
<img src="img/company.jpg"alt="右边图" >
</div>
<div class="clear">
</div>
</div>
</body>
</html>
.floatclass{
width: 1256px;
height: 461px;
}
.title{
margin-left: 285px;
}
.word{
width: 590px;
height: 263px;
margin-top: 56px;
margin-left: 33px;
float: left;
}
.content{
font-size: 15px;
color: #959595;
text-indent: 2em;
}
.word>.word_title{
margin-bottom: 31px;
font-size: 25px;
font-weight: bolder;
}
.word>.word_kuang{
width: 79px;
height: 22px;
padding: 14px 54px 15px 56px;
margin-top: 29px;
background: #f58400;
color: #fff;
}
.tu{
margin-top: 39px;
float: right;
}
.clear{
clear:both;
}