[分享]css中常见的有哪几种浮动方式

CSS中常见的有哪几种浮动方式？浮动是CSS中一种非常常见的布局方式，它通常用于将元素从其正常的位置移动到屏幕上另一个位置。在CSS中，共有三种浮动方式：左浮动、右浮动以及清除浮动。左浮动左浮动是最常...

CSS中常见的有哪几种浮动方式？
浮动是CSS中一种非常常见的布局方式，它通常用于将元素从其正常的位置移动到屏幕上另一个位置。在CSS中，共有三种浮动方式：左浮动、右浮动以及清除浮动。
左浮动
左浮动是最常见的浮动方式之一。当我们对一个元素设置左浮动时，该元素会被移动到它正常位置的左侧，同时让周围的元素环绕其周围。使用CSS代码实现左浮动很简单：

p {
  float: left;
} 

这段代码将使页面上所有的段落都向左浮动。
右浮动
与左浮动类似，右浮动也是一种常见的浮动方式。当我们对一个元素设置右浮动时，该元素会被移动到它正常位置的右侧，同时让周围的元素环绕其周围。使用CSS代码实现右浮动也很简单：

p {
  float: right;
} 

这段代码将使页面上所有的段落都向右浮动。
清除浮动
虽然浮动可以使我们的页面更加灵活，但浮动元素会对整个页面的布局产生不良影响。如果您的页面上有多个浮动元素，并且它们互相交叉，那么浮动元素之间可能会发生重叠。为了解决这个问题，我们需要使用清除浮动。
清除浮动是通过CSS代码将一个元素恢复到正常文档流中，从而消除浮动造成的影响。使用CSS代码实现清除浮动也很简单：

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}

/* Hides from IE-mac */
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* End hide from IE-mac */ 

以上代码是一个通用的清除浮动代码，它将为所有使用“clearfix”类的元素添加浮动清除。如果您需要清除浮动，并防止元素之间产生重叠，这段代码一定会对您有所帮助！
总结
浮动是CSS中的一种常见的布局方式，它可以使您的页面更加灵活，但同时也可能会造成布局上不良影响。通过左浮动、右浮动以及清除浮动，您可以完美地控制您的页面布局，让页面看起来更加美观和实用。