css不允许两边有浮动

在网页设计中，CSS是一个非常重要的语言，用来控制网页的排版和样式。在使用CSS时，我们经常会使用浮动（float）属性来实现文本环绕、布局等功能。但是，CSS不允许两边有浮动，那么这个规则是怎样产生的呢？

首先，我们需要了解一下浮动的基本原理：当元素浮动时，它会脱离文档流，不再占据原来的位置，其他元素就会通过文本环绕等方式来填补它的位置。但如果两个元素都浮动，则它们会互相影响，使不好像预期中的那样排列。

/* 两个left浮动元素的代码 */
.float-left {
    float: left;
    width: 50%;
}

<div class="float-left">左</div>
<div class="float-left">右</div> 

上面的代码中，我们创建了两个左浮动的元素，它们各占一半的宽度。但是，如果我们在它们的外层再加一个容器，就会出现问题。

/* 两个float左侧元素div包容在一个宽度为800px的div中 */
.container {
    width: 800px;
}

<div class="container">
    <div class="float-left">左</div>
    <div class="float-left">右</div>
</div> 

在上面的代码中，我们将两个浮动元素放在一个宽度为800px的容器中，这时它们会挤在一起，因为它们都浮动在左边，容器宽度太小容不下了。

为了解决这个问题，我们可以给容器也添加一个浮动属性。

/* 把容器加上左侧float属性 */
.container {
    float: left;
    width: 800px;
}

<div class="container">
    <div class="float-left">左</div>
    <div class="float-left">右</div>
</div> 

这样，两边的浮动元素就能够成功排列了。但是这样做会带来另一个问题，那就是容器高度的问题。

当容器内的元素都是浮动元素时，容器会失去高度，不能撑起整个页面，为了解决这个问题，可以给容器添加清除浮动的属性。

/* 给容器添加一个含有non-float属性的clearfix类 */
.clearfix::before, .clearfix::after {
    content: "";
    display: table;
}

.clearfix::after {
    clear: both;
}

.container {
    float: left;
    width: 800px;
    margin-top: 20px;
}

<div class="container clearfix">
    <div class="float-left">左</div>
    <div class="float-left">右</div>
</div> 

通过给容器添加.clearfix类，我们就可以成功解决容器高度问题了，同时两边的浮动元素也能够正常排列了。

综上，CSS不允许两边有浮动是因为两个浮动元素会互相影响，导致布局不正常。但是，我们可以通过给容器添加float属性、清除浮动等方法来解决这个问题，并实现良好的布局效果。