浮动 15-浮动

15-浮动

 

浮动

浮动是css里面布局最多的一个属性,也是很重要的一个属性。css

float:表示浮动的意思。它有四个值。html

  • none: 表示不浮动,默认
  • left: 表示左浮动
  • right:表示右浮动

看一个例子前端

html结构:linux

 <div class="box1"></div>
 <div class="box2"></div>
 <span>路飞学城</span>

css样式:web

复制代码
.box1{
     width: 300px;
     height: 300px;
     background-color: red;
     float:left;
  }
 .box2{
     width: 400px;
     height: 400px;
     background-color: green;
     float:right;
   }
   span{
     float: left;
     width: 100px;
     height: 200px;
     background-color: yellow;
    }
复制代码

咱们会发现,三个元素并排显示,.box1和span由于是左浮动,紧挨在一块儿,这种现象贴边。.box2盒子由于右浮动,因此紧靠着右边。浏览器

 

那么浮动若是你们想学好,必定要知道它的四大特性布局

1.浮动的元素脱标post

2.浮动的元素互相贴靠url

3.浮动的元素由"子围"效果spa

4.收缩的效果

 

浮动元素脱标

脱标:就是脱离了标准文档流

 

看例子

     <div class="box1">小红</div>
     <div class="box2">小黄</div>
     <span>小马哥</span>
     <span>小马哥</span>
复制代码
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: yellow;
        
        }
        span{
            background-color: green;
            float: left;
            width: 300px;
            height: 50px;
        }
复制代码

效果:红色盒子压盖住了黄色的盒子,一个行内的span标签居然可以设置宽高了。

缘由1:小红设置了浮动,小黄没有设置浮动,小红脱离了标准文档流,其实就是它不在页面中占位置了,此时浏览器认为小黄是标准文档流中的第一个盒子。因此就渲染到了页面中的第一个位置上。这种现象,也有一种叫法,浮动元素“飘起来了”,但我不建议你们这样叫。

缘由2:全部的标签一旦设置浮动,就可以并排,而且都不区分行内、块状元素,都可以设置宽高

浮动元素互相贴靠

看例子

html结构

    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>

css样式

复制代码
        .box1{
            width: 100px;
            height: 400px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 150px;       
            height: 450px;
            float: left;
            background-color: yellow;
        }
        .box3{
            width: 300px;
            height: 300px;
            float: left;
            background-color: green;
        }
复制代码

效果发现:

若是父元素有足够的空间,那么3哥紧靠着2哥,2哥紧靠着1哥,1哥靠着边。
若是没有足够的空间,那么就会靠着1哥,若是再没有足够的空间靠着1哥,本身往边靠

 

浮动元素字围效果

html结构:

复制代码
<div>
        <img src="./images/企业1.png" alt="">    
    </div>
    <p>
        123路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
    </p>
复制代码

 

css样式:

复制代码
       *{
            padding: 0;
            margin: 0;
        }
        div{
            float: left;
        }
        p{
            background-color: #666;
        }
复制代码

效果发现:所谓字围效果,当div浮动,p不浮动,div遮盖住了p,div的层级提升,可是p中的文字不会被遮盖,此时就造成了字围效果。

浮动元素紧凑效果

收缩:一个浮动元素。若是没有设置width,那么就自动收缩为文字的宽度(这点跟行内元素很像)

html结构:

<div>
     alex
</div>

css样式:

div{
    float: left;
    background-color: red;
}

 

你们必定要谨记:关于浮动,咱们初期必定要遵循一个原则,永远不是一个盒子单独浮动,要浮动就要一块儿浮动。另外,有浮动,必定要清除浮动,

 

为何要清除浮动

在页面布局的时候,每一个结构中的父元素的高度,咱们通常不会设置。(为何?)

你们想,若是我初版的页面的写完了,感受很是爽,忽然隔了一个月,老板说页面某一块的区域,我要加点内容,或者我以为图片要缩小一下。这样的需求在工做中很是常见的。真想打他啊。那么此时做为一个前端小白,确定是去每一个地方加内容,改图片,而后修改父盒子的高度。那问题来了,这样不影响开发效率吗?答案是确定的。

看一个效果:

html效果:

复制代码
<div class="father">    
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>

</div> <div class="father2"></div>
复制代码

css样式:

复制代码
       *{
            padding: 0;
            margin: 0;

        }
        .father{
            width: 1126px;
            /*子元素浮动 父盒子通常不设置高度*/

            /*出现这种问题,咱们要清除浮动带来影响*/
            /*height: 300px;*/

        }
        .box1{
            width: 200px;
            
            height: 500px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 300px;
            height: 200px;
            float: left;
            background-color: green;
        }
        .box3{
            width: 400px;
            float: left;
            height: 100px;
            background-color: blue;
        }
        .father2{
            width: 1126px;
            height: 600px;
            background-color: purple;
        }
复制代码

效果发现:若是不给父盒子一个高度,那么浮动子元素是不会填充父盒子的高度,那么此时.father2的盒子就会跑到第一个位置上,影响页面布局。

那么咱们知道,浮动元素确实能实现咱们页面元素并排的效果,这是它的好处,同时它还带来了页面布局极大的错乱!!!因此咱们要清除浮动

还好还好。咱们有多种清除浮动的方法,在这里给你们介绍四种:

  1. 给父盒子设置高度
  2. clear:both
  3. 伪元素清除法
  4. overflow:hidden

给父盒子设置高度

这个方法给你们上个代码介绍,它的使用不灵活,通常会经常使用页面中固定高度的,而且子元素并排显示的布局。好比:导航栏

clear:both

clear:意思就是清除的意思。

有三个值:

left:当前元素左边不容许有浮动元素

right:当前元素右边不容许有浮动元素

both:当前元素左右两边不容许有浮动元素

给浮动元素的后面加一个空的div,而且该元素不浮动,而后设置clear:both。

html结构:

复制代码
<div>
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>
            <!-- 给浮动元素最后面加一个空的div 而且该元素不浮动 ,而后设置clear:both  清除别人对个人浮动影响-->
            <!-- 内墙法 -->
            <!-- 平白无故加了div元素  结构冗余 -->
            <div class="clear"></div>
            
        </ul>
        
</div>
<div class="box">
        
</div>        
复制代码

css样式

复制代码
       *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        
        }


        div{
            width: 400px;
        
        }
        

        div ul li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        .clear{
            clear: both;
        }
复制代码

 

伪元素清除法(经常使用)

给浮动子元素的父盒子,也就是不浮动元素,添加一个clearfix的类,而后设置

复制代码
.clearfix:after{
    /*必需要写这三句话*/
    content: '.';
    clear: both;
    display: block;
}
复制代码

新浪首页推荐伪元素清除法的写法

复制代码
    
            /*新浪首页清除浮动伪元素方法*/
              content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden

        
复制代码

overflow:hidden(经常使用)

overflow属性规定当内容溢出元素框时发生的事情。

说明:

这个属性定义溢出元素内容区的内容会如何处理。若是值为 scroll,不管是否须要,用户代理都会提供一种滚动机制。所以,有可能即便元素框中能够放下全部内容也会出现滚动条。

 

有五个值:

描述
visible 默认值。内容不会被修剪,会呈如今元素框以外。
hidden 内容会被修剪,而且其他内容是不可见的。
scroll 内容会被修剪,可是浏览器会显示滚动条以便查看其他的内容。
auto 若是内容被修剪,则浏览器会显示滚动条以便查看其他的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

逐渐演变成overflow:hidden清除法。

其实它是一个BFC区域: http://www.javashuo.com/article/p-ezyacvwn-v.html

到此为止。关于浮动的实现并排、清除浮动的四个用法已经介绍完毕,你们必定要熟记于心。

相关文章
相关标签/搜索