美文网首页
认识浮动 float

认识浮动 float

作者: tail33 | 来源:发表于2017-12-17 13:00 被阅读0次

关于浮动,原本是用于方便文字围绕图片。但后来发现它在布局发挥的作用更大

浮动元素对布局的影响

把一个元素设置成浮动元素,无论它是什么元素,浮动元素会变成块级元素,它会从文档的正常流删除,还会影响布局。

首先来看浮动元素后面跟随着行内元素

一个浮动元素,一个行内元素

<div class="parent">
        <div class="float-div">浮动元素</div>
        <span>浮动元素后面跟随的行内元素span</span>
</div>

我们把行内元素的左外边距设置成 -30px

<style>
       .float-div{
           float:left;
           width:100px;
           height: 100px;
           background-color: orange;
       }
       span{
          margin-left: -30px;
          background-color: red;
       }
</style>

效果如下:

image.png

我们可以得出结论,浮动元素和后面跟随的行内元素如果发生覆盖的话,行内元素会覆盖浮动元素。

相反,如果后面跟随的是块级元素跟浮动元素发生覆盖的话,浮动元素会覆盖块级元素,但不会覆盖内容。

代码:

<div class="parent">
        <div class="float-div">浮动元素</div>
        <div class="div">浮动元素后面跟随的块级元素div</div>
        <span>浮动元素后面跟随的行内元素span</span>
</div>

<style>
       .float-div{
           float:left;
           width:100px;
           height: 100px;
           margin: 20px 0 0 20px;
           background-color: orange;
       }
       .div{
           height: 100px;
           width: 200px;
           background-color: blue;
       }
       span{
          margin-left: -30px;
          background-color: red;
       }
    </style>

效果:


image.png

这就是浮动元素和行内元素跟块级元素相互覆盖时的不同

了解过盒子模型的都知道,当两个元素在垂直方向都有外边距的时候,会发生重合,大的覆盖小的。

我们来看一个例子

第一个div的下外边距为 70px,第二个div的上外边距为50.

<div class="div1"></div>
<div class="div2"></div>

<style>
       div{
           width: 100px;
           height: 100px;
           background-color: orange;
       }
       .div1{
           margin-bottom: 70px;
       }
       .div2{
           margin-top: 50px;
       }
 </style>

效果

image.png

我们把第二个元素设置成浮动后,看看效果

 .div2{
           float: left;
           margin-top: 50px;
       }
image.png

第二个元素浮动后的外边距就不会跟第一个重叠了

css 权威指南上这么说:

浮动元素的左(或右)外边界必须是源文档中之前出现的左浮动(或右浮动)元素的右(左)外边界,除非后出现浮动元素的顶端在先出现浮动元素的低端下面。

撑起父元素高度

当父元素中的子元素都浮动后,父元素里面没有任何内容撑起高度的话,高度就会为0.
通常需要父元素也要有高度的话,可以用以下的方法
1.父元素也设置成浮动元素
2.给父元素添加一个子元素<div></div> ,然后为这个子元素添加style:clear:both;

相关文章

  • 认识浮动 float

    关于浮动,原本是用于方便文字围绕图片。但后来发现它在布局发挥的作用更大 浮动元素对布局的影响 把一个元素设置成浮动...

  • CSS浮动float详解

    CSS里浮动float是个概念比较暧昧的属性,撸主最早对浮动float的认识是基于布局的,认为float元素就是用...

  • CSS浮动float详解

    CSS里浮动float是个概念比较暧昧的属性,撸主最早对浮动float的认识是基于布局的,认为float元素就是用...

  • 浮动,高度塌陷,定位

    float设置浮动: float有3个可选值,分别是:float:left向左浮动,float:right向右浮动...

  • 浮动float

    float中的四个参数 左浮动:float:left右浮动:float:right不浮动:float:none继承...

  • 清除浮动的几个主要方法

    浮动:float,常用的css属性,可以设置左浮动float:left;右浮动float:right;不浮动flo...

  • Float和Position

    FLOAT:float:left;左浮动float:right;右浮动浮动产生的问题:添加浮动会出现父div只能显...

  • Test10

    引用文章: 那些年我们一起清除过的浮动 CSS浮动float详解 Clear Float CSS float浮动的...

  • 格式化上下文

    对于float浮动元素后面的元素可以通过clear来消除float的浮动 根元素( )浮动元素(元素的 float...

  • 前端开发入门到实战:css 浮动布局,清除浮动

    浮动的特性: (1)浮动元素有左浮动(float:left)和右浮动(float:right)两种 (2)浮动的元...

网友评论

      本文标题:认识浮动 float

      本文链接:https://www.haomeiwen.com/subject/idsywxtx.html