有关浮动和常用清除方法总结
2011-07-19 16:07
295 查看
[align=left] 一、最早浮动是应用于图像，使文本围绕图像周围，现在浮动经常被用到布局当中。因为浮动的对象脱离了文档流，它在文档中不占据空间，所以包含它的容器的高度不会随着它高度增加而增加，为了解决这个问题，需要清除浮动。[/align] html代码如下：
<head>
<title></title>
<style type="text/css">
div{border: solid 1px #ccc;}
.layout{width: 300px;}
.left{float: left;}
.right {float: right;}
.left,.right{width:100px;height:100px;}
</style>
</head>
<body>
<div class="layout">
layout
<div class="left">
float left
</div>
<div class="right">
float right
</div>
</div>
</body>
预期效果如下：
实际效果如下：
二、清除方法总结
1、添加空元素
在代码中添加空元素，并利用clear属性。修改代码如下：
<head>
<title></title>
<style type="text/css">
div{border: solid 1px #ccc;}
.layout{width: 300px;}
.left{float: left;}
.right {float: right;}
.left,.right{width:100px;height:100px;}
.clear{clear:both;}
</style>
</head>
<body>
<div class="layout">
layout
<div class="left">
float left
</div>
<div class="right">
float right
</div>
<div class="clear"></div>
</div>
</body> 2、使用伪类after
修改代码如下：
<head>
<title></title>
<style type="text/css">
div{border: solid 1px #ccc;}
.layout{width: 300px;}
.left{float: left;}
.right {float: right;}
.left,.right{width:100px;height:100px;}
.layout:after{display:block;content:".";clear:both;height:0px;visibility:hidden;}
</style>
</head>
<body>
<div class="layout">
layout
<div class="left">
float left
</div>
<div class="right">
float right
</div>
</div>
</body>
3、使用overflow属性
修改代码如下：
<head>
<title></title>
<style type="text/css">
div{border: solid 1px #ccc;overflow:hidden;}
.layout{width: 300px;}
.left{float: left;}
.right {float: right;}
.left,.right{width:100px;height:100px;}
</style>
</head>
<body>
<div class="layout">
layout
<div class="left">
float left
</div>
<div class="right">
float right
</div>
</div>
</body>
<head>
<title></title>
<style type="text/css">
div{border: solid 1px #ccc;}
.layout{width: 300px;}
.left{float: left;}
.right {float: right;}
.left,.right{width:100px;height:100px;}
</style>
</head>
<body>
<div class="layout">
layout
<div class="left">
float left
</div>
<div class="right">
float right
</div>
</div>
</body>
预期效果如下：
实际效果如下：
二、清除方法总结
1、添加空元素
在代码中添加空元素，并利用clear属性。修改代码如下：
<head>
<title></title>
<style type="text/css">
div{border: solid 1px #ccc;}
.layout{width: 300px;}
.left{float: left;}
.right {float: right;}
.left,.right{width:100px;height:100px;}
.clear{clear:both;}
</style>
</head>
<body>
<div class="layout">
layout
<div class="left">
float left
</div>
<div class="right">
float right
</div>
<div class="clear"></div>
</div>
</body> 2、使用伪类after
修改代码如下：
<head>
<title></title>
<style type="text/css">
div{border: solid 1px #ccc;}
.layout{width: 300px;}
.left{float: left;}
.right {float: right;}
.left,.right{width:100px;height:100px;}
.layout:after{display:block;content:".";clear:both;height:0px;visibility:hidden;}
</style>
</head>
<body>
<div class="layout">
layout
<div class="left">
float left
</div>
<div class="right">
float right
</div>
</div>
</body>
3、使用overflow属性
修改代码如下：
<head>
<title></title>
<style type="text/css">
div{border: solid 1px #ccc;overflow:hidden;}
.layout{width: 300px;}
.left{float: left;}
.right {float: right;}
.left,.right{width:100px;height:100px;}
</style>
</head>
<body>
<div class="layout">
layout
<div class="left">
float left
</div>
<div class="right">
float right
</div>
</div>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 有关浮动和常用清除方法总结
- css清除浮动float的七种常用方法总结和兼容性处理
- CSS常用清除浮动方法总结
- DIV+CSS 清除浮动常用方法总结
- css清除浮动float的七种常用方法总结和兼容性处理
- CSS清除float浮动的常用几种方法
- css清除浮动float的三种方法总结
- CSS清除浮动常用方法小结
- 清除浮动方法总结
- [复习］清除浮动的几种方法总结
- 对于浮动以及清除浮动方法的理解及总结
- 清除浮动方法总结
- 清除浮动的方法总结
- 清除浮动几种方法个人总结
- 常见清除浮动方法总结
- 清除浮动的几种常用方法
- IE6+以上清除浮动普遍方法总结
- css清除浮动float的三种方法总结
- 清除浮动的常用方法
- 清除浮动float的两种常用方法