[分享]css中float有什么影响

在CSS中，float是一种常用的属性。它用于控制元素在文档流中的位置，让元素浮动在其他元素的上方或下方。当元素被设置为float后，它会脱离正常文档流，只会占据它本身的位置。其它的元素会自动填充进来...

在CSS中，float是一种常用的属性。它用于控制元素在文档流中的位置，让元素浮动在其他元素的上方或下方。

当元素被设置为float后，它会脱离正常文档流，只会占据它本身的位置。其它的元素会自动填充进来。

代码例子：
.float-example{
    float: left;
    width: 200px;
    height: 200px;
    margin-right: 20px;
} 

在上面的代码中，float: left的作用是让.float-example元素向左浮动。这样，在页面布局时，浮动元素会在文档流中空出一个位置，如果有其它元素想进入这个位置，则会向上或下移动，以填补这个空隙。

浮动元素的宽度默认会自适应其内容的宽度。如果需要给浮动元素设置宽度或高度，需要配合设置其他样式，比如margin或padding。

但是，CSS中浮动元素还有一些需要注意的事项。当浮动元素与其它元素重叠时，会出现z-index问题，需要使用z-index属性来解决。还需要注意浮动元素对父元素的影响：

父元素没有设置高度：浮动元素会导致父元素高度坍塌，导致父元素高度为0。
父元素设置了高度：浮动元素不会导致高度坍塌，但会导致父元素宽度发生变化。 

如果需要避免父元素高度坍塌，可以使用clear属性清除浮动元素对父元素高度的影响。clear有多个取值，其中clear: both可以让元素下面空白行不受影响。

属性值：
clear: left;
clear: right;
clear: both;
clear: none; 

总结来说，CSS中的float属性可以让元素浮动在其他元素之上或之下，但会导致文档流的变化、父元素高度的坍塌等问题。使用时需要注意以上的一些问题，并灵活运用相关属性进行控制。