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

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


<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>

产生的效果:
CSS清除浮动使父级元素展开_第1张图片
方法一:设置父级元素的高度,但是要事先知道内容的高度,这里内部的元素高度是100像素,加上上下边框高度2像素,一共是102像素。


<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>

效果为:
CSS清除浮动使父级元素展开_第2张图片
方法二:添加样式,并在父级元素结束标签前添加both:clear样式。


<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>

效果为:
CSS清除浮动使父级元素展开_第3张图片
方法三:添加overflow属性


<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>

效果为:
CSS清除浮动使父级元素展开_第4张图片

你可能感兴趣的:(css,css)