[分享]css元素后不允许浮动

CSS中的浮动是常用的布局方式，它可以使元素脱离文档流并沿着文本周围浮动，从而实现多列布局的效果。但是，有些元素却不允许浮动，当你尝试对它们进行浮动时，可能会出现一些意外的效果。下面我们就来看看哪些元...

CSS中的浮动是常用的布局方式，它可以使元素脱离文档流并沿着文本周围浮动，从而实现多列布局的效果。但是，有些元素却不允许浮动，当你尝试对它们进行浮动时，可能会出现一些意外的效果。下面我们就来看看哪些元素不允许浮动。

 img {
        float: left; /* 图片将被浮动 */
    }
    input[type="checkbox"], input[type="radio"] {
        float: left; /* 复选框和单选框将被浮动 */
    } 

首先，图片是最常见的不允许浮动的元素。如果你尝试对图片进行浮动，它依然会在周围浮动，但是可能会影响布局中的其他元素，比如与图片重叠的文字可能会出现折行的情况。

其次，复选框和单选框也是不允许浮动的元素。如果你尝试对它们进行浮动，它们依然会在文本周围浮动，但是可能会影响到其他复选框和单选框的排列，导致布局错乱。

当然，这并不是说这些元素一定不能浮动，而是浮动这些元素时需要特别小心，需要考虑它们的周围布局以及相邻元素的排列。如果你想让这些元素左右排列，建议使用display: inline-block来实现。