CSS的浮动及其在布局中的应用-创新互联

CSS浮动是什么

CSS中浮动属性(float)设计的初衷是为了解决页面展示样式时需要文字环绕图片的场景；类似于Word中的文字环绕属性，基础使用场景如下:

为建昌等地区用户提供了全套网页设计制作服务，及建昌网站建设行业解决方案。主营业务为成都做网站、网站建设、建昌网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

浮动前:

浮动后:

代码实现如下(简化版)

    
    
xxx

浮动带来的问题--高度塌陷

由于设置了float后元素脱离了标准流，从而导致了高度的塌陷，这里有一个很直观的例子

浮动前

浮动后

高度塌陷带来的问题

当出现高度塌陷后原本想放在下面的元素会自动向上补充，出现这种结果

演示代码

    

    
这里是一个段落

如何解决塌陷--清除浮动

清除浮动主流方法有两种:1）使用clear属性清除浮动；2）新建BFC

利用clear属性

方式一：在设置float的兄弟元素最后设置一个元素，对其设置clear属性，如下

    

    
这里是一个段落
    

方式二：
方式一的缺点还是很明显的，就是平白无故的新增了一个没有内容的元素，使页面出现冗余；这里可以利用伪元素来达到同样的效果

main::after{
        content:"";
        display:table;
        clear:both;
    }

清除浮动后的效果

新建BFC

该方法的原理是：父元素在新建一个 BFC 时，其高度计算时会把浮动子元素的包进来。那么如何新建一个BFC呢

根元素或其它包含它的元素
浮动 (元素的 float 不是 none)
绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
内联块 inline-blocks (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
块元素具有overflow ，且值不是 visible
display: flow-root
虽然有这么多方法可用，可我们常用的就是 overflow: hidden

main{
        overflow:hidden;
    }

也可以达到清除浮动的效果

float在布局中的使用

float元素设计的初衷虽然是文字环绕图片,但是目前其最广泛的应用却是在布局领域，下面除了介绍如何应用在布局外，还会介绍几种常见的float布局方式，下面给出了最简单的流式布局样式

1.传统流式布局

每个div默认占据一行，不论宽度都会占满此行；float布局的核心思想就是怎么把这些一行一行的数据给他以美观的方式呈现出来

代码演示

    div1


    div2


    div3


    div4

2.我们将div2设置为悬浮后会发生什么

为什么会出现这种情况呢?div3莫名其妙的变短了?
其实并不是div3变短了，而是div2设置浮动后脱离了页面的流，悬浮在了其他元素的上面，而div2脱离后div3自然的向上补充，带着div4整体上移，又被div2挡住了一部分所以出现了上图中的情况，对比看一下div2右浮动就比较清晰了

3.再将div3悬浮后会发生什么

同理，这里div2 div3脱离标准流并悬浮其上,组成了一个新的层次；div4直接上移，部分被di2和div3所遮挡

4.基础原理大概介绍完毕，那么如何利用float将上面的代码构造出美观的效果呢

代码示例(为了美观做了部分调整，关注重点即可)

    div2


    div1


    div3



    div4

最终样式如下，是网页中非常常见的三列布局方式

这里介绍了CSS浮动的基本知识，由于篇幅原因有些比较基础细致的知识没有包含，大家感兴趣可以自己学习下!

下面一篇博客会有具体的例子供大家参考，有需要的可以看下

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。