[分享]css元素浮动后不占有位置

在网页设计中，元素的浮动是常见的布局方式。通过设置元素的float属性，可以实现元素在同一行内浮动，从而达到灵活布局的目的。但是，有时候我们会遇到一个问题，就是浮动的元素会导致它所在的块级元素不占有位...

在网页设计中，元素的浮动是常见的布局方式。通过设置元素的float属性，可以实现元素在同一行内浮动，从而达到灵活布局的目的。但是，有时候我们会遇到一个问题，就是浮动的元素会导致它所在的块级元素不占有位置。

.box{
  border: 1px solid #ccc;
}
.box p{
  float: left;
  width: 100px;
  height: 100px;
  background-color: #eee;
  margin-right: 10px;
} 

如上面的代码所示，我们创建了一个容器.box，并在其中放置了两个浮动的p元素。我们发现，容器.box没有占有位置，而两个p元素则覆盖在一起，导致内容重叠。

这个问题的根源在于浮动元素会脱离标准文档流，也就是说，它不再占有位置，而是漂浮在文档中间。因此，容器.box的高度被浮动元素“撑开”，导致无法正常显示。

解决这个问题的方法有多种，其中一种常见的方法是清除浮动。我们可以通过设置容器元素的::after伪元素，添加一个空内容的块级元素，并设置clear属性来清除浮动。

.box::after{
  content: "";
  display: block;
  clear: both;
} 

通过在容器元素后添加一个空块级元素，并清除浮动，我们可以保证容器元素占有位置，同时也不会影响到其他元素的布局。

除了清除浮动，还有其他一些方法可以解决元素浮动后不占有位置的问题，比如使用inline-block布局、使用flex布局等等。无论使用哪种方法，我们都要为了良好的页面效果，尽量避免出现元素浮动后不占有位置的情况。