清除浮动

如何清除浮动,当元素出现浮动以后,其他元素会受到影响,如图:

本来1、2、3应该是垂直排列的,当1出现浮动后,2、3便网上顶了上来。

这种情况我们可以给受到影响的元素设置清除浮动来解决问题

clear来清除浮动,clear有left、right、both、none等几个值,left是清除左浮动对他的影响,right是清除右浮动对他的影响,both是清除左右浮动对他影响大的那个浮动,none是不清除浮动。

如图,给受影响的2清除浮动后,就正常了


现在box1左浮动,box2右浮动,box3清除左浮动显示如下:


现在box1左浮动,box2右浮动,box3清除右浮动显示如下:


如果设置box3清除浮动值未both,效果和claear:right一样,因为右浮动对他影响较大。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 盒子的高度问题 1.标准流中盒子的高度可以被内容高度撑起来;2.浮动流中浮动的内容不能撑起盒子的高度; 为什么要清...
    壹点微尘阅读 498评论 0 0
  • 在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高 但是当为子元素设置浮动以后,子元素会...
    吕若凡阅读 429评论 0 0
  • 首先: 我们需要知道div元素(块级元素)独占一行 如下图所示,box1和box2独占一行,可见如果每个div都独...
    香芋牛奶面包阅读 7,924评论 2 6
  • 文章版权归饥人谷_Lyndon以及饥人谷所有。 1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分...
    HungerLyndon阅读 2,485评论 4 10
  • 清除浮动 盒子高度问题 在标准流中内容的高度可以撑起盒子的高度 在浮动流中浮动元素内容的高不可以撑起盒子的高 清除...
    Jackson_yee_阅读 342评论 0 0

友情链接更多精彩内容