浮动影响

zhaofeihao 发布于2019-08-29 13:01 / 1191人阅读

摘要：四包含关系的盒子，可能情况里面盒子浮动，包住它的盒子不浮动时，父盒子背景无显示原因由于元素浮动后脱离了文档流，所以父元素是无法根据元素来自适应的。

一、浮动元素自动变块级元素

非浮动元素占据浮动元素位置，浮动元素不能占据非浮动元素位置？？？向上占据

浮动元素会被自动设置成块级元素，相当于给元素设置了display:block（块级元素能设置宽和高，而行内元素则不可以）。

 

浮动元素span
 
 
 

非浮动元素span

二、并列关系的盒子，不一致地浮动，位置问题

元素浮动会对后面非浮动的兄弟元素产生影响

可能情况

后边若是非浮动行内元素，且因为定位产生重叠时，行内盒子模型压在该浮动元素之上

后边若是非浮动块级元素，且在定位后产生重叠时，该块级的内容围绕该浮动元素显示，其他在该浮动元素底下

示例代码如下：

 

 
    浮动DIV
 

 
    跟在浮动元素后边的DIV
 

 
    跟在浮动元素后边的span

效果如下

不过在ie6这个效果却很怪异，如图：

浮动元素没有压在非浮动div之上，反而把span压住了。

解决办法

对被浮动影响的元素添加clear:both

三、并列关系的盒子，一致地同方向浮动，高度不一致问题

多个同方向浮动元素一般是按照流式布局，一行满了则自动换行，也就是类似于以下效果：

但各个浮动元素高度不一致的话效果很可能出现下边的情况：

原因

主要排列到元素7的时候，一行已经显示不下了，所以要换行，但此处换行并不是从行头开始，而是从元素5那开始，因为元素5比元素6高很多导致。

四、包含关系的盒子， 可能情况

里面盒子浮动，包住它的盒子不浮动时，父盒子背景无显示

原因

由于元素浮动后脱离了文档流，所以父元素是无法根据元素来自适应的。

解决办法1 clear:both 用法

在所有浮动元素后加:

 
TEST DIV

（1）有clear:both的：

（2）无clear:both的

原理

子元素浮动后，因为脱离文档流，所以父元素包含不住，无法撑开。由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。

解决办法2 overflow 用法




    div1
    div2

原理

在父元素上设置overflow这个属性，如果父元素的这个属性设置为auto或者是hidden，父元素就会扩展包含浮动，这个方法有着比较好的语义性，因为它不需要额外的元素，但是，要记住一点，overflow属性不是为了清除浮动而定义的，要小心不要覆盖住内容或者触发了不需要的滚动条。

解决办法3 clearfix类 用法

 



    div1
    div2

原理：

这种方式这样理解，就是利用伪类元素，也就是在有浮动的标签前面添加一个块级元素，来达到效果。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112305.html

css浮动的理解

摘要：浮动的理解什么是浮动概念浮动是指的是的属性。对于设置了浮动的元素，在页面效果上可以通俗的理解为这个元素漂起来了在水上，位置发生变化，不按代码中排列。关于浮动，后续会总结以下消除浮动影响的相关内容。 css浮动的理解什么是浮动概念浮动是指的是css的属性float。对于设置了浮动的元素，在页面效果上可以通俗的理解为这个元素漂起来了（在水上），位置发生变化，不按HTML代码中排列。从...

WilsonLiu95 2019-08-29 14:13 评论0 收藏0
带你彻底了解CSS浮动（文字整理版）

摘要：谢老板谢然最近在讲堂上开了一个视频课程带你彻底掌握浮动，因为视频比较长分钟，不方便回顾，我将之做了一个整理，并从我自己理解的角度进行了阐述，以做记录。相应的背景文档浮动结语以上就是谢老板在视频中的内容，希望帮助到大家。谢老板（谢然）最近在segmentfault讲堂上开了一个视频课程《带你彻底掌握CSS浮动》，因为视频比较长（69分钟），不方便回顾，我将之做了一个整理，并从我自己理解...

AlphaWatch 2019-08-29 14:09 评论0 收藏0
理解CSS浮动与清理

摘要：浮动为什么会有文本环绕效果产生这个疑问主要来自于以往的印象浮动的元素是脱离文档流的。也就是说，浮动元素的确脱离了文档流，因此文档流中的块框会无视浮动的元素，但是文本不会。作为前端写了很多页面布局，但是浮动这块一直是我似懂非懂的盲点，一方面用浮动能实现很多布局，另一方面浮动造成的影响又会破坏布局让人头疼，所以今天就特地写篇博文解决这块盲点。本文主要讨论以下几个问题：1.浮动的原始用途...

Tonny 2019-08-29 12:23 评论0 收藏0
理解CSS浮动与清理

摘要：浮动为什么会有文本环绕效果产生这个疑问主要来自于以往的印象浮动的元素是脱离文档流的。也就是说，浮动元素的确脱离了文档流，因此文档流中的块框会无视浮动的元素，但是文本不会。作为前端写了很多页面布局，但是浮动这块一直是我似懂非懂的盲点，一方面用浮动能实现很多布局，另一方面浮动造成的影响又会破坏布局让人头疼，所以今天就特地写篇博文解决这块盲点。本文主要讨论以下几个问题：1.浮动的原始用途...

cyqian 2019-08-01 16:39 评论0 收藏0
为什么设置overflow为hidden可以清除浮动带来的影响

摘要：以下情况会触发根元素的值不为的值为，，的值为，和中的任何一个的值不为和显然我们在设置值为时使元素具有，那么子元素浮动便不会带来父元素的高度坍塌影响。1.问题起源　　　　在平时的业务开发写CSS中，为了满足页面布局，元素的浮动特性我们用的不能再多了。使用浮动的确能够解决一些布局问题，但是也带了一些副作用影响，比如，父元素高度塌陷，我们有好几种可以清除浮动的方法，最常用的就是设置父元素的ove...

JeOam 2019-04-23 13:09 评论0 收藏0