CSS Float属性
CSS Float属性用于设置指定元素的浮动方向，常用于布局排版中的位置控制。
基本语法
float: left | right | none | inherit;
取值解析
left: 元素向左浮动right: 元素向右浮动none: 元素不浮动inherit: 继承父元素的浮动属性
需要注意的是使用Float属性进行布局时，一定要想清楚浮动元素和非浮动元素的交互关系，否则容易造成布局混乱。
负面影响
当使用Float布局时，可能会出现一些负面影响，如下：
-
父元素高度塌陷：如果子元素使用了float属性，父元素的高度无法自适应调整，一般解决方法为给父元素也添加float属性。
-
元素重叠：如果两个元素都向同一浮动方向进行浮动时，如果宽度之和超过了父元素的宽度，则后面的元素会被前面的元素挤出父元素。
CSS Float属性的使用示例
以下是两个使用CSS Float实现的常见例子。
实例1：左右布局
<body>
<div class="left-column"></div>
<div class="right-column"></div>
</body>
.left-column {
float: left;
width: 50%;
}
.right-column {
float: right;
width: 50%;
}
使用float属性实现左右布局时，需要给每个元素设置宽度，并使用float属性的left和right值分别进行浮动。这样就可以很容易地实现左右布局。
实例2：文字环绕效果
<body>
<img src="example.png" class="float-left" />
<p>这是一段文本，将会写在图片周围。这是一段文本，将会写在图片周围。这是一段文本，将会写在图片周围。这是一段文本，将会写在图片周围。</p>
</body>
.float-left {
float: left;
margin-right: 10px;
}
使用float属性可以实现文字围绕图片的效果。这个效果只需要将图片向左或向右浮动，并设置一个适当的margin值即可。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：css float属性 图解float属性的点点滴滴 - Python技术站
微信扫一扫 
支付宝扫一扫 