点评：一个没有设置高度的容器div内如果存在浮动元素（即使用了属性float:left或者float:right)，那么该父级元素会无法展开，下面举个例子为大家详细介绍下，希望对大家有所帮助

一个没有设置高度的容器div内如果存在浮动元素（即使用了属性float:left或者float:right)，那么该父级元素会无法展开。 

举个例子，有一个div容器，div容器里有两个小容器，分别向左和向右浮动，为了区别这三个容器，分别设置了不同颜色的边框。 

复制代码
代码如下:

<html>
<head>
<style>
.content {
width:500px;
border:1px solid red;
}
.left {
width:100px;
height:100px;
border:1px dashed blue;
float:left;
}
.right {
width:100px;
height:100px;
border:1px dashed green;
float:right;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html> 

产生效果： 

注意到父级元素content没有展开。 

为了使父级元素展开，有三种方法： 

第一：设置父级元素的高度，但是要事先知道内容的高度，这里内部的元素高度是100像素，加上上下边框高度2像素，一共是102像素。 

复制代码
代码如下:

<html>
<head>
<style>
.content {
width:500px;
border:1px solid red;
height:102px;
}
.left {
width:100px;
height:100px;
border:1px dashed blue;
float:left;
}
.right {
width:100px;
height:100px;
border:1px dashed green;
float:right;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html> 

第二：添加样式，并在父级元素结束标签前添加both:clear样式。 

复制代码
代码如下:

<html>
<head>
<style>
.content {
width:500px;
border:1px solid red;
}
.left {
width:100px;
height:100px;
border:1px dashed blue;
float:left;
}
.right {
width:100px;
height:100px;
border:1px dashed green;
float:right;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
</body>
</html> 

第三：添加overflow属性： 

复制代码
代码如下:

<html>
<head>
<style>
.content {
width:500px;
border:1px solid red;
overflow:hidden;
}
.left {
width:100px;
height:100px;
border:1px dashed blue;
float:left;
}
.right {
width:100px;
height:100px;
border:1px dashed green;
float:right;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

CSS清除浮动使父级元素展开的三个方法的更多相关文章

  1. 解决子元素用css float浮动后父级元素高度自适应高度

    1.在最后一个子元素后面清除浮动 2.父元素加over-flow:hidden;(副作用:子元素定位不能超出父元素的范围) 3.父元素也一样浮动(最笨的方法): 4.子元素使用inline-block ...

  2. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  3. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  4. 子级用css float浮动 而父级div没高度不能自适应高度

    子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...

  5. 子级用css float浮动 而父级不能自适应高度解决方法

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...

  6. CSS清除浮动常用方法小结

    1.使用空标签清除浮动.我用了很久的一种方法,空标签可以是div标签,也可以是P标签.我习惯用<P>,够简短,也有很多人用<hr>,只是需要另外为其清除边框,但理论上可以是任何 ...

  7. CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}

    常用的清除浮动的方法有以下三种: 此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景 <!DOCTYPE html><html><head> <met ...

  8. css清除浮动的几种方法整理

    四种清除浮动方法如下: 1.使用空标签清除浮动.空标签可以是div标签,也可以是P 标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签 清除浮动,并为其定义CSS代码:cle ...

  9. CSS清除浮动的方法

    CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...

随机推荐

  1. nginx的luajit安装luarocks并安装luafilesystem

    nginx的luajit安装luarocks并安装luafilesystem by admin on -- :: in , 69次 标题有点绕口.我尽量把关键词都贴进去.之前因为自己的nginx安装了 ...

  2. c++ virtual 和 pure virtual的区别

    参考资料: http://stackoverflow.com/questions/1306778/c-virtual-pure-virtual-explained 验证代码: #include < ...

  3. linux 命令之 ping

    ping命令主要用于检測主机的连通性. 语法: ping [-dfnqrRv] [-c <完毕次数>] [-i <间隔秒数>] [-I <网络接口>] [-l &l ...

  4. Yii简单使用阿里云短信教程!

    首先我们下载官方完整包的SDK官方标明了啊,PHP版本一定要不低于5.5下载后目录如下: 我们只需要将目录里的api_sdk复制出来到Yii项目的根目录的common模块下面的extensions文件 ...

  5. Linux快速计算MD5和Sha1命令

    Linux计算MD5和Sha1的命令 MD5 MD5即Message-Digest Algorithm 5(信息-摘要算法 5),用于确保信息传输完整一致.是计算机广泛使用的杂凑算法之一(又译摘要算法 ...

  6. layout折叠后显示标题

    Easyui的layout折叠后显示怎样可以显示标题 //在layout的panle全局配置中,增加一个onCollapse处理title$.extend($.fn.layout.paneldefau ...

  7. Eclipse 创建 Java 包

    打开新建 Java 包向导 你可以使用新建 Java 包向导来创建 Java 包.Java 包向导打开方式有: 通过点击 "File" 菜单并选择 New > Package ...

  8. Laravel5.1 模型--查询作用域

    所谓的查询作用域就是允许你自定义一个查询语句 把它封装成一个方法. 1 定义一个查询作用域 定义查询作用域就是在模型中声明一个scope开头的方法: public function scopeHotA ...

  9. Linux命令之paste

    介绍 cut用来从文本文件或标准输出中抽取数据列或者域,然后再用paste可以将这些数据粘贴起来形成相关文件.粘贴两个不同来源的数据时,首先需将其分类,并确保两个文件行数相同. paste将按行将不同 ...

  10. cocos2d-x学习日志(18) --程序是怎样開始执行与结束?

    问题的由来 怎么样使用 Cocos2d-x 高速开发游戏.方法非常easy,你能够看看其自带的例程,或者从网上搜索教程,执行起第一个HelloWorld,然后在 HelloWorld 里面写相关逻辑代 ...