您的位置：首页 > Web前端 > CSS

css基础 clear属性:both 使用div块清除左右浮动的简单示例

2017-02-16 11:08 936 查看

镇场诗：
　　　　清心感悟智慧语，不着世间名与利。学水处下纳百川，舍尽贡高我慢意。
　　　　学有小成返哺根，愿铸一良心博客。诚心于此写经验，愿见文者得启发。
——————————————————————————————————————————

code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
body,img,p{
margin:0px;
padding:0px;
}
.box{
width:600px;
border:1px solid red;
margin:20px auto;
}
.box img{
width:270px;/*各个元素的宽与高都是相互联系，互相限制的*/
border:1px solid #ccc;
padding:10px;
background-color:#ccc;
float:left;
}
.box .contentOne{
float:right;
width:300px;/*浮动元素，要想漂浮于图片右侧，要定宽*/
background-color:blueviolet;
}
.box .clear{
clear:both;
}
.box .contentTwo{
background-color:darkorange;
}
</style>
</head>
<body>
<div class="box">
<!--处于同一行的元素，要浮动就需要都浮动-->
<img src="images/bgpicture.jpg"/><!--这也是块元素，也可以浮动-->
<p class="contentOne">
九华山地藏菩萨露天铜像坐落于中国四大佛教名山之一、国家级重点风景名胜区、首批5A级旅游景区的九华山。1995年开始筹建，由顶峰国际规划设计公司承担景区规划设计，圣像主体高99米，是目前世界上最高的露天地藏菩萨大铜像，是九华山国际性佛教道场的标志性景观。
</p><!--这也是块元素，也可以浮动-->
<div class="clear"></div>
<div class="contentTwo">
九华山地藏菩萨露天铜像，像身高度84米，加上莲花座底盘高度99米，整个铜像连同底座高155米，是目前世界上最大最高的佛教造像之一。地藏菩萨为比丘相，右手持锡杖，左手持摩尼宝珠。面向西北方，端庄慈祥，以示“昭示众生，国泰民安”。
</div>
</div>
</body>
</html>

result:

——————————————————————————————————————————
博文的精髓，在技术部分，更在镇场一诗。编辑器 VS2015,浏览器 Firefox。
html+css+js，强，值得努力学习。我跟着传智播客的视频教程学习。
我是一个新手，所以如果博文的内容有可以改进的地方，甚至有错误的地方，请留下评论，我一定努力改正，争取成就一个良心博客。
注：此文仅作为科研学习，如果我无意中侵犯了您的权益，请务必及时告知，我会做出改正。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航