浮动与清除浮动

时间  2019-11-29
标签 浮动 清除 繁體版
原文   原文链接

什么是标准文档流

宏观的将，咱们的web页面和ps等设计软件有本质的区别，web 网页的制做，是个“流”，从上而下 ，像 “织毛衣”。而设计软件 ，想往哪里画东西，就去哪里画css

标准文档流下 有哪些微观现象？html

1.空白折叠现象

多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，若是在一行内写img标签，就解决了这个问题，可是咱们不会这样去写咱们的html结构。这种现象称为空白折叠现象。前端

2.高矮不齐，底边对齐

文字还有图片大小不一，都会让咱们页面的元素出现高矮不齐的现象，可是在浏览器查看咱们的页面总会发现底边对齐linux

3.自动换行，一行写不满，换行写

若是在一行内写文字，文字过多，那么浏览器会自动换行去显示咱们的文字。web

浮动

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

float：表示浮动的意思。它有四个值。ide

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

看个栗子布局

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

.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;
    }
View Code

咱们会发现，三个元素并排显示，.box1和span由于是左浮动，紧挨在一块儿，这种现象贴边。.box2盒子由于右浮动，因此紧靠着右边。(UI不少都是模糊了用户的双眼，脱离了文档标准流，其实不在文档中了，比如是有个盒子，我给它设置了透明色，咱们看不到它，可是它实际存在的。)spa

那么浮动若是你们想学好，必定要知道它的四大特性.net

1.浮动的元素脱标

2.浮动的元素互相贴靠

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

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;
        }
View Code

效果：红色盒子压盖住了黄色的盒子，一个行内的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>
View Code

css样式：

       *{
            padding: 0;
            margin: 0;
        }
        div{
            float: left;
        }
        p{
            background-color: #666;
        }
View Code

效果发现：所谓字围效果，当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>
View Code

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;
        }
View Code

效果发现：若是不给父盒子一个高度，那么浮动子元素是不会填充父盒子的高度，那么此时.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>
View Code

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;
        }
View Code

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

给浮动子元素的父盒子，也就是不浮动元素，添加一个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

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

margin塌陷问题

当时说到了盒模型，盒模型包含着margin，为何要在这里说margin呢？由于元素和元素在垂直方向上margin里面有坑。

咱们来看一个例子：

html结构：

<div class="father">
    <div class="box1"></div>        
    <div class="box2"></div>
</div>

 css样式：

*{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 400px;
            overflow: hidden;
            border: 1px solid gray;
        }
        .box1{
            width: 300px;
            height: 200px;
            background-color: red;
            margin-bottom: 20px;}
        .box2{
            width: 400px;
            height: 300px;
            background-color: green;
            margin-top: 50px;
        }
View Code

当给两个标准流下兄弟盒子 设置垂直方向上的margin时，那么以较大的为准，那么咱们称这种现象叫塌陷。咱们称为这种技巧叫“奇淫技巧”。记住这种现象，在布局垂直方向盒子的时候主要margin的用法。

当咱们给两个标准流下的兄弟盒子设置浮动以后，就不会出现margin塌陷的问题。

margin：0 auto;

div{
            width: 780px;
            height: 50px;
            background-color: red;
            /*水平居中盒子*/
            margin: 0px auto;
                        /*水平居中文字*/
            text-align: center;

        }

 

当一个div元素设置margin：0 auto;时就会居中盒子，那咱们知道margin:0 auto;表示上下外边距离为0，左右为auto的距离，那么auto是什么意思呢？

设置margin-left:auto；咱们发现盒子尽量大的右边有很大的距离，没有什么意义。当设置margin-right:auto；咱们发现盒子尽量大的左边有很大的距离。当两条语句并存的时候，咱们发现盒子尽量大的左右两边有很大的距离。此时咱们就发现盒子居中了。

另外如何给盒子设置浮动，那么margin:0 auto失效。

使用margin：0 auto;注意点：

1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;

2.只有标准流下的盒子 才能使用margin:0 auto;

当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

另外你们必定要知道margin属性是描述兄弟盒子的关系，而padding描述的是父子盒子的关系

善于使用父亲的padding，而不是margin

若是让你们实现如图的效果，应该有很多的同窗作不出来。

那么咱们来看看这个案例，它的坑在哪里？

下面这个代码应该是你们都会去写的代码。

*{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        .xiongda{
            width: 100px;
            height: 100px;
            background-color: orange;

            margin-top: 30px;
        }
View Code

由于父亲没有border，那么儿子margin-top实际上踹的是“流” 踹的是行,因此父亲掉下来了，一旦给父亲一个border发现就行了。

那么问题来了，咱们不可能在页面中平白无故的去给盒子加一个border，因此此时的解决方案只有一种。就是使用父亲的padding。让子盒子挤下来。

小结

先来了解一下block元素和inline元素在文档流中的排列方式。

block元素一般被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素能够设置width、height、margin、padding属性；

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效

常见的块级元素有 div、form、table、p、pre、h1～h五、dl、ol、ul 等。
常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
所谓的文档流，指的是元素排版布局过程当中，元素会自动从左往右，从上往下的流式排列。

脱离文档流，也就是将元素从普通的布局排版中拿走，其余盒子在定位的时候，会当作脱离文档流的元素不存在而进行定位。

假如某个div元素A是浮动的，若是A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(若是一行放不下这两个元素，那么A元素会被挤到下一行)；若是A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部老是和上一个元素的底部对齐。此外，浮动的框以后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。 浮动的框以后的inline元素，会为这个框空出位置，而后按顺序排列。

float属性值：

一、left：左浮动 左侧为起始，从左向右排列
二、right：右浮动  右侧为起始，从右向左排列
三、none ：不浮动，默认不浮动

浮动产生的影响

浮动可使元素按指定方向排列,直到遇到父元素的边界或另外一个浮动元素中止

浮动的特性

什么是文档流

可见元素在文档中排列位置，元素排版布局过程当中，元素会自动从左往右，从上往下的流式排列。

1.浮动会使元素脱离文档流
2.浮动会使元素提高层级
3.浮动可使块元素在一行排列，不设置宽高的时候，可使元素适应内容 
4.浮动可使行内元素支持宽高

浮动产生的问题

父元素不设置高度，子元素设置浮动以后，不会撑开父元素的高度,那么此时父盒子没有高度了。若是在次父盒子下面还有一个标准流的盒子，那么就会影响页面的布局。因此咱们要解决浮动带来的页面布局错乱问题------清除浮动。

解决办法

 1.给父元素固定高度。不灵活
 2.在浮动元素最后加一个空的块元素，且块元素不浮动，设置其属性为clear：both    结构冗余
 3.经常使用方法：.wrap:after{
            clear: both;
            content: "";
            height: 0;
            visibility: hidden;
            display: block;
        }

4.给父盒子 添加overflow:hidden属性
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程