CSS清除浮动使父级元素展开的三个方法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS清除浮动使父级元素展开的三个方法相关的知识，希望对你有一定的参考价值。
点评：一个没有设置高度的容器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清除浮动使父级元素展开的三个方法的主要内容，如果未能解决你的问题，请参考以下文章