浮动相关的细细碎碎

sunyueru

于 2017-07-06 21:59:04 发布

阅读量310

点赞数

分类专栏：前端开发文章标签：清除浮动

本文链接：https://blog.csdn.net/sunyueru/article/details/74612974

版权

前端开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前言：今天主要是整理一下浮动和清除浮动的相关的内容，也顺便理一下overflow和clear的相关。清除浮动的方法主要也是看了网上的总结，然后自己实现了一下。

一、什么是标准文档流
标准文档流是指不使用一些奇奇怪怪的属性（默认状态）的时候，文档中的元素会自动从左往右、从上往下的流式排版。
标准文档流中的两种元素：块级元素和行内元素
块级元素
1. 独占一行
2. 可以设置宽高
3. 不设置宽高的时候，默认宽度和父级元素一样
行内元素
1. 与其他元素并排显示
2. 不可以设置宽高（记住啊）
注：块级元素和行内元素可以使用display：block，display：inline等来切换
（具体参见http://blog.csdn.net/sunyueru/article/details/74503129关于div和span部分的总结）
二、浮动（脱离了标准文档流）
如果某个div设置了浮动，那个该盒子就会脱离标准文档流。简单的说如果class名为float的div设置了浮动，那么可以把该盒子“视而不见”，该盒子不再占用标准文档流中的位置。
具体来说，如下：
代码：

<style type="text/css">
        .div1{background-color: red;width: 100px;height: 50px;}
        .div2{background-color: green;width: 200px;height: 40px;}
        .div3{background-color: yellow;width: 40px;height: 20px;}
        .div4{background-color: pink;width: 80px;height: 30px;}
    </style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
</body>

这里写图片描述

case1：让div2左浮动
这里写图片描述

解释：对“div2”视而不见，div3和div4从div1往下依次排列（但是被div2挡住了，虽然对div2视而不见，但是它还是存在的）。
case2：让div2右浮动

解释：div3,div4仍然对div2视而不见，依次从div1往下排。但是这次是右浮动，所以div2没有把div3，div4遮住。
case3：让div2和div3同时浮动：
这里写图片描述
解释：对div2和div3视而不见，div4从div1往下排（这里div4高度没设好，完全被遮住了。）同时，div2和div3依次往左排。
三、清除浮动
先说明一下关于clear的知识点
clear的语法：

语法很简单，那么问题来了：
下面两个div都设置了左浮动，请问怎么把div2拉下来，让他和div1一样左对齐呢？
这里写图片描述
口诀就是（我也是看别人的）：clear这个规则只能影响使用清除浮动的元素本身。
拿这个例子来说，现在是div2需要清除浮动，所以应该是给div2使用clear（谁要清除浮动谁来用clear）。
进一步的，是不允许div2左边有浮动对吧，所以答案应该是给div2加clear：left。
下面结合一个具体的例子，分别说明不同的清除浮动的方法。
需要说明的是，按照参考自己的页面格式来说这些方法都是可行的。但是我换了一下自己写的一个demo，有几个方法就不奏效了，可能还是原理没有理解，之后再来追加吧。先记录一下常用的方法。原链接：http://www.jb51.net/css/173023.html
页面原始格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            border: 1px solid black;
            width:300px;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: #ff4400;
            margin-right: 20px;
            float: left;
        }
        .footer{
            background-color: #005FC3;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

具体实现就不写在这里了，原博客写的很清楚。
就是我还没有解决的问题是：为什么我的demo套用某些歌方法就不奏效，不知道是我套用的不对还是怎么滴。貌似只可以用clear：both来清除浮动。

先粘一下我举的例子：

<style type="text/css">
        #content{

        }
        #left{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        #right{
            width: 200px;
            height: 100px;
            background-color: green;
            float: right;
        }
        #bottom{
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="content">
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="bottom"></div>
</div>
</body>

这里写图片描述

给bottom添加clear：both可以清除浮动：
这里写图片描述

但是使用overflow：hidden，after伪元素这些个方法就不适用了。我个人觉得是因为我这里就一个div里面三个小div，就相当于我前面针对clear举得那个例子。而原博里面的demo是两个并列的div，第一个里面有浮动元素。貌似不太一样，但是具体原因我也说不清楚，可能还是不理解清除浮动的具体原理吧。。之后这个问题解决了再来追加吧。