CSS float

作者: roy_pub | 来源:发表于2018-12-08 14:12 被阅读5次

Test10
clearfix
CSS float
float css
CSS Float
css float
css定位
css笔记左侧固定宽度右侧自适应
CSS-多列布局
Css中的float和BFC（Block Formatting

网页布局的核心，利用 CSS 来摆放盒子的位置，如何把盒子摆放到合适的位置？
CSS 定位分为三种，普通流（标准流）、浮动、定位。

普通流，网页标签从上到下，从左往右布局，比如块级元素独占一行，行内元素会按顺序从前往后排，按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        .up {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .down {
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="up">
    </div>
    <div class="down"></div>
</body>
</html>

float 浮动最早用来控制图片，浮动可以让多个盒子在一行内显示，可以用来布局。浮动脱离标准流，移动到父元素中之东的位置。

属性	说明
left	左浮动
right	右浮动
none	不浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        .up {
            width: 50%;
            height: 100px;
            background-color: pink;
            float: left;
        }

        .down {
            width: 60%;
            height: 150px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="up">
    </div>
    <div class="down"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        .up {
            width: 50%;
            height: 100px;
            background-color: pink;
            float: left;
        }

        .down {
            width: 50%;
            height: 100px;
            background-color: greenyellow;
            float: left;
        }
    </style>
</head>
<body>
    <div class="up">
    </div>
    <div class="down"></div>
</body>
</html>

浮动可以让元素默认转化为行内块，大小取决于内容多少
如果给行内元素添加了浮动，此时不需要转化这个元素也有宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .divOne {
            height: 100px;
            background-color: green;
        }
        .divTwo {
            height: 100px;
            background-color: red;
            float: left;  //浮动可以让元素默认转化为行内块，大小取决于内容多少
        }

        span {
            width: 100px;
            height: 100px;
            background-color: cyan;
            float: left; //如果给行内元素添加了浮动，此时不需要转化这个元素也有宽高
        }
    </style>
</head>
<body>
    <div class="divOne">Hello World</div>
    <div class="divTwo">Hello World</div>
    <span>Hello World</span>
</body>
</html>