点评：一个没有设置高度的容器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. java编译器特性

    1.当一个表达式两边都是字面量,则编译过程中就会进行计算,并将结果生成在表达式的位置,以节省运算效率: ps:jvm认为只有是字面量时,才会对比常量池中内容:而如果是new的新对象为不同对象. 例1: ...

  2. Vue 组件 非父子组件通信

    有时候两个组件也需要通信(非父子关系),在简单的场景下,可以使用一个空的vue实例作为中央事件总线: var bus = new Vue(); //触发组件a中的事件 bus.$emit('id-se ...

  3. Linux vi 文件编辑

    1.通过vi filename 进入编辑状态 2.退出 vi 编辑器 退出命令 说明 q 如果文件未被修改,会直接退回到Shell:否则提示保存文件. q! 强行退出,不保存修改内容. wq w 命令 ...

  4. Chromium浏览器组件设计意图

    在文章開始之前.我要叽歪几句,一上来就看Chrome的代码.简直晕头转向,摸来摸去莫不着头脑,好不easy看了一点点代码.却犹如瞎子摸象.无法众观全局.以下这篇小文,简介当中一个重要的模块--Comp ...

  5. selenium+testng+reportng+ant+jenkins集成日记

    1.新建一个项目 2.编写测试脚本 3.配置ant的build.xml脚本 4.集成到jenkins,并运行 1.新建项目   注意jdk的版本要一致 eclipse  Window --Prefer ...

  6. asp.net网站底部的版权信息实现代码且可维护

    网站底部的版权信息在特殊情况还是比较重要的所以在实现的时候一定要尽可能的做到可维护性,接下来将介绍一些技巧可达到可维护效果,感兴趣的你可不要错过了哈 一个大网站页面很多,如果每个版权信息直接写在下面, ...

  7. jQuery整理笔记八----jQuery的Ajax

    Ajax,我一直读的是"阿贾克斯",据当时大学老师讲该读音出处是依据当年风靡欧洲的荷兰足球俱乐部阿贾克斯的名字来的,我认为说法挺靠谱的. jQuery封装了Ajax的交互过程,用户 ...

  8. 哈工大LTP

    http://ltp.ai/ http://pyltp.readthedocs.io/zh_CN/latest/ http://www.cnblogs.com/Denise-hzf/p/6612886 ...

  9. python学习【第五篇】python函数 (二)

    一.装饰器 装饰器:本质就是函数,功能是为其它函数添加附加功能 装饰器的原则: 不修改被修饰函数的源代码 不修改被修饰函数的调用方式 装饰器的知识储备: 装饰器 = 高阶函数 + 函数嵌套 + 闭包 ...

  10. jetty;tomcat;热部署

    [说明]今天上午进行了jetty的插件部署,下午进行了tomcat的插件部署,晚上有其它事情需要回校 一:今日完成 1)搞定插件直接部署到jetty 2)搞定插件直接部署到tomcat 3)了解了一下 ...