- Bootstrap从入门到项目实战
- 李爱玲
- 135字
- 2021-03-24 20:37:00
5.6.1 实现浮动
在Bootstrap 4中,可以使用以下两个类来实现左浮动和右浮动。
■ .float-left:元素向左浮动。
■ .float-right:元素向右浮动。
设置浮动后,为了不影响网页的整体布局,需要清除浮动。Bootstrap 4中使用.clearfix类来清除浮动,只需把.clearfix添加到父元素中即可。
【例5.20】浮动示例。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P89_2722.jpg?sign=1738941105-SinESWaH0AJtXAG737z7dtMJaqjklrCK-0-69147b3db665c05d2a2fe4183ce6e165)
在IE 11浏览器中运行结果如图5-22所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P90_2733.jpg?sign=1738941105-EiD2Zn1jVngJuXMx5KszaX9G6s6YqVZe-0-1e4927456afb75b56583cc160aa6e26a)
图5-22 浮动效果