html怎么清除浮动？几个办法帮你轻松处理

发布时间：2022-04-20 09:30:26 所属栏目：语言来源：互联网

导读：我们在制作HTML页面时，经常会遇到浮动问题，如果当子元素浮动时，不清除浮动就会导致后面的元素排版乱序。那么都有什么方法能够清除浮动呢？使用display：inline-block会出现的情况： 1.使块元素在一行显示 2.使内嵌支持宽高 3.换行被解析了 4.不设置的时

我们在制作HTML页面时，经常会遇到浮动问题，如果当子元素浮动时，不清除浮动就会导致后面的元素排版乱序。那么都有什么方法能够清除浮动呢？

       使用display：inline-block会出现的情况：
       1.使块元素在一行显示
       2.使内嵌支持宽高
       3.换行被解析了
       4.不设置的时候宽度由内容撑开
       5.在IE6,7下步支持块标签
       由于inline-block属性换行的时候被解析（有间隙）故解决方法使用浮动float:left/right
       使用浮动时出现的情况：
       1.使块元素在一行显示
       2.使内嵌元素支持宽高
       3.不设置不宽高的时候宽度由内容撑开
       4.换行不被解析（故使用行内元素的时候清除间隙的方法可以使用浮动）
       5.元素添加浮动，会脱离文档流，按照指定的一个方向移动，直到碰到父级的边界或者另一个浮动元素停止（文档流是文档中可显示对象在排列时所占用的位置）

       下面的代码只有box1浮动，则box1，box2重叠一起。两者都浮动就不会重叠

       代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box1{ width:100px;height:100px;background:red; float:left;}
.box2{ width:200px;height:200px;background:blue; /* float:left;*/}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
       清浮动的方法：
       1.给父级也加浮动（这种情况当父级margin:0 auto;时不居中）

       代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000; float:left;}
.div{ width:200px;height:200px;background:red;float:left;}
/*
    清浮动
    1.给父级也加浮动(不居中了)
*/
</style>
</head>
<body>
<div class="box">
    <div class="div"></div>
</div>
</body>
</html>

       2.给父级加display:inline-block;(同方法1，不居中。只有IE6,7居中)

       代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{ width:300px;margin:0 auto;border:10px solid #000; display:inline-block;}
.div{ width:200px;height:200px;background:red;float:left;}

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Tomcat下载和安置	装饰器模式装饰设计模
无用单元采集垃圾回收	Java访问对象的属性和