[分享]css两个div浮动不起作用

在前端开发中，我们经常使用CSS来布局页面。其中，浮动是一种常见的布局方式。但是有时候我们会遇到两个div浮动不起作用的问题，具体来说就是它们并没有按照我们预期的左右排列。出现这种问题的原因可能有很多...

在前端开发中，我们经常使用CSS来布局页面。其中，浮动是一种常见的布局方式。但是有时候我们会遇到两个div浮动不起作用的问题，具体来说就是它们并没有按照我们预期的左右排列。

出现这种问题的原因可能有很多。下面我们就来一一分析：

div {
    width: 200px;
    height: 100px;
    margin-right: 20px;
    float: left;
} 

1. 宽度+间距之和超过了容器的宽度。

这种情况下，应该减小div的宽度或者减小它们之间的间距，以适应容器的宽度。也可以考虑使用CSS3中的calc()函数来计算宽度和间距之和。

div {
    width: calc(50% - 10px);
    height: 100px;
    margin-right: 20px;
    float: left;
} 

2. div中包含了浮动元素。

如果div中包含了浮动元素，那么它就会失去高度。这时，我们需要为div设置clear属性。

div:after {
    content: "";
    display: table;
    clear: both;
} 

3. 浮动元素没有清除。

如果另外一些元素也被设置成了浮动，但没有被清除，那么它们会影响到我们的布局。这时，我们需要为整个容器设置clear属性。

.container:after {
    content: "";
    display: table;
    clear: both;
} 

总之，解决两个div浮动不起作用的问题，还需要结合具体的布局情况进行。只有理解了造成问题的原因，才能更好地解决它。