浮动

浮动的来历

正常页面流：
- 在css中，是存在流的概念的，正常情况下，页面总是由左至右，由上至下布局，我们把这种情况称作为正常页面流
- 但是，在很多情况下，正常页面流有很多效果实现不了，所以需要一些手段来破坏流，而浮动（float）就是破坏流的一种手段
浮动的来历：
- float设计的初始想法仅仅是为了做文字环绕图片
  - 浮动以后元素出现重叠，但是行框盒子和浮动元素有不可重叠性
- 在目前开发中，很多的元素都是一个个的float堆叠起来的，但是这种布局及其容易崩溃
- 只要高度和宽度发生一点变化，页面都可能发生错乱

浮动

float属性：

左浮动（left）：让元素沿着容器左侧放置，允许文本和内联元素环绕它，它从正常的页面中移除，虽然还保持一点流动性
右浮动（right）：让元素沿着容器右侧放置，允许文本和内联元素环绕它，它从正常的页面中移除，虽然还保持一点流动性
none：不浮动

浮动解决一行显示块标签问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动解决一行显示块标签问题</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 5px;
            /*float: left;*/
            float: right;
        }
        .box2{
            width: 150px;
            height: 150px;
            background-color: yellow;
            margin: 5px;
            /*float: left;*/
            float: right;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box1"></div>
        <div class="box2">aa</div>
    </div>
</body>
</html>Copy to clipboardErrorCopied

可能被阻挡的浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可能被阻挡的浮动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 960px;
            margin: 0 auto;
            background-color: #5df2ff;
        }
        ul li{
            width: 300px;
            height: 200px;
            margin: 10px;
            background-color: red;
            float: left;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>Copy to clipboardErrorCopied

常见浮动练习

浮动对元素的影响

浮动对元素的影响:
- 块标签：
  
  不再独占一行
  
  仍然可以设置宽和高
  
  构成了BFC，不再进行父级塌陷
  
  完美支持margin和padding
- 行标签：
  
  可以设置宽高
  
  完美支持padding和margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动对元素的影响</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
            padding: 10px;

            /*float: left;*/
        }

        .span1{
            width: 100px;
            height: 30px;
            background-color: #5df2ff;
            margin: 40px;
            padding: 20px;

            float: left;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <span class="span1">span1</span>
</body>
</html>Copy to clipboardErrorCopied

脱离文档流

设置浮动的元素会脱离文档流，浮动的元素，并不属于文档中的普通流，元素漂浮于普通流之上，像浮云一样，但能够左右浮动。
由于浮动这种特性，导致本属于普通流的元素设置浮动后，如果父级不存在其他普通流元素，父级的高度就会为0，如果父级存在其他普通流的元素，父级的高度也会受影响

清除浮动

浮动的概念：让元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者是上一个浮动元素或者是上一个不浮动兄弟元素就停下来
高度塌陷：
- 浮动元素以后，脱离父级内容区域，父级没有内容撑开自身的高度
- 父级的兄弟元素是按照父级的位置进行布局的，所以页面会乱掉
清除浮动：清除浮动不是不让元素浮动，而是清除浮动对父级带来的影响
清除浮动的方法：
1. 给浮动元素的父级设置高度height（不推荐使用）
  
  缺点：很多情况下高度都是不缺定的所有不适用
2. 以浮制浮，给浮动元素的父元素设置浮动，原理是开启BFC（不推荐使用）
  
  缺点：只有在父级需要浮动的时候，可以这么清除，否则父级的浮动会影响布局
3. overflow：hidden；给父级设置，原理也是开启BFC（可以使用）
  
  优点：简单快捷
  
  缺点：元素超出的时候，会隐藏超出部分
4. br清除浮动：在浮动元素的后边书写一个br。br中书写clear属性，值为all
  
  缺点：增加不必要的元素，不符合样式与结构相分离的要求
5. clear清浮动法：给浮动元素的下边添加一个块元素，书写样式clear:both
  
  缺点：增加额外的结构，不符合语义化标准
6. after伪元素清浮动（推荐）
  
  可以给所有浮动元素的父级一个 clearFix的类名
  
  当一个元素需要清除浮动的时候直接设置clearFix类名即可
```
.clearFix:after{
    content:"\200B";  必须拥有content属性   内容为空
    display: block;   必须块标签才能清浮动
    height: 0;          高度为0 不占用空间
    clear: both;        清除浮动
}

.clearFix{  //兼容ie
    *zoom:1;    //*是css  hack 只有ie6.7 认识
    ie6、7 不支持伪元素，所以需要开启元素的haslayout来清除浮动
}
```

posted @ 2023-01-09 23:10 z_bky 阅读(43) 评论(0) 收藏举报

刷新页面返回顶部

z-bky

浮动

浮动的来历

浮动

浮动解决一行显示块标签问题

可能被阻挡的浮动

常见浮动练习

浮动对元素的影响

脱离文档流

清除浮动

公告