点评：一个没有设置高度的容器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. jvm参数设置和性能调优

    1.Java虚拟机运行时的数据区 2.常用的内存区域调节参数 -Xms:初始堆大小,默认为物理内存的1/64(<1GB):默认(MinHeapFreeRatio参数可以调整)空余堆内存小于40% ...

  2. Qt5 CMake cross compile

    cmake_minimum_required(VERSION 2.8) if (${ARM}) set(CMAKE_SYSTEM_NAME Linux) set(CMAKE_SYSTEM_PROCES ...

  3. JIRA /mnt/server/atlassian-jira-6.3.6-standalone/bin/start-jira.sh

    JIRA 敏捷开发平台部署记录   分类: 敏捷开发   1.1 jira说明 JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪.客户服务.需求收集.流程审批.任务跟踪. ...

  4. Spring MVC隐藏字段域

    以下示例显示如何在使用Spring Web MVC框架的表单中使用隐藏字段(Hidden).首先使用Eclipse IDE来创建一个WEB工程,实现在隐藏字段中指定用户编号的功能.并按照以下步骤使用S ...

  5. Package java.sql

    Provides the API for accessing and processing data stored in a data source (usually a relational dat ...

  6. 第4步：创建RAC共享磁盘组

    方法一:使用asmdevices(推荐使用,但不适用EMC Powerpath) )查看硬盘的SCSI号,两个机器认到的/dev/sda对应在实际的物理盘可能不是一块,但scsi号肯定是完全一致的. ...

  7. poj 2594(可相交的最小路径覆盖)

    题目链接:http://poj.org/problem?id=2594 思路:本来求最小路径覆盖是不能相交的,那么对于那些本来就可达的点怎么处理,我们可以求一次传递闭包,相当于是加边,这样我们就可以来 ...

  8. Linux下IP等网络配置

    Linux下IP等网络配置: 我所知道一共三种方式,下面简单介绍(注意:网络配置必须”root管理员“登录才能进行配置). 一 1.首先在命令行输入[ifconfig]命令,可看到相关网络信息,其中” ...

  9. openssl 升级 操作 -1

    好多公司都会用绿盟扫描系统漏洞,里边就会涉及到ssl 漏洞,原因是openssl 版本低导致,会让你升级到指定版本.下面就介绍一下openssl 版本升级的操作方案. 一. 查看系统版本 [root@ ...

  10. 阿里云服务器 进行zookeeper集群时候的肯！

    首先我本地虚拟机 部署过N次没什么问题! 擦,上了云就启动后不能正常节点之间连接和发现! 这上面有手误 擦,吧编号的2 打成22 了,这个看下日志就解决了 重点是zoo.conf 中的IP进行配置时候 ...