CSS清除浮动使父级元素展开

来源：互联网发布：网络购物平台图片大全编辑：程序博客网时间：2024/06/05 05:33

　　一个没有设置高度的容器div内如果存在浮动元素（即使用了属性float:left或者float:right)，那么该父级元素会无法展开，下面用三种方法解决：
　　源代码为：
　　

<!DOCTYPE html><html><head>    <title>清除子元素的浮动</title>    <style type="text/css">        .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>

产生的效果：
这里写图片描述
方法一：设置父级元素的高度，但是要事先知道内容的高度，这里内部的元素高度是100像素，加上上下边框高度2像素，一共是102像素。

<!DOCTYPE html><html><head>    <title>清除子元素的浮动</title>    <style type="text/css">        .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样式。

<!DOCTYPE html><html><head>    <title>清除子元素的浮动</title>    <style type="text/css">        .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;        }        .cl{            clear: both;        }    </style></head><body>    <div class="content">        <div class="left"></div>        <div class="right"></div>        <div class="cl"></div>    </div></body></html>

效果为：
这里写图片描述
方法三：添加overflow属性

<!DOCTYPE html><html><head>    <title>清除子元素的浮动</title>    <style type="text/css">        .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>

效果为：
这里写图片描述

阅读全文

0 0