CSS之父元素包含浮动子元素

CSS之父元素包含浮动子元素

#third {
            width: 500px;
            float: left;
            background: orange;
            height: 500px;
        }
        #forth {
            width: 400px;
            height: 400px;
            background: pink;
            float: left;
        }
        #main 
        {
            border:2px solid red;
        }
<div id="main">
      
        <div id="third">
            我很好啊
        </div>
        <div id="forth">
            你好不好
        </div>
    </div>

在这里，我们给id为main的父元素的两个子元素设置为左浮动，由于，当给元素设置浮动时，元素就会脱离常规文档流，因此，在常规文档流中，id为main的div 高度为0.
我们在这里给父元素设置了一个边框，那么如何实现在视觉效果上，使父元素的边框仍包含浮动子元素呢？

这里介绍两种简单方法：

• clear + 一个空元素
• 伪元素 ::after

1. clear + 一个空元素

就是说，在父元素的最下面添加一个空元素，给他设置样式时，使用 clear:both

#clear
{
clear:both;
}
 <div id="main">
        <div id="third">
            我很好啊
        </div>
        <div id="forth">
            你好不好
        </div>
        <div id = "clear"></div>
    </div>

2. 伪元素::after

 #main::after{
            content:"";
            display:block;
            clear:both;
        }
        
 <div id="main">
        <div id="third">
            我很好啊
        </div>
        <div id="forth">
            你好不好
        </div>
        
    </div>

结果如同上图。