CSS学习笔记二--浮动

最新推荐文章于 2024-09-14 08:09:14 发布

思思～

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量279

点赞数

分类专栏：前端学习文章标签： css html

本文链接：https://blog.csdn.net/qq_45231291/article/details/117571516

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、介绍

二、简单例子

三、学习总结

一、介绍

浮动（float）：用于元素“水平”方向的布局

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

可选值：none：默认值，不开启浮动
left：元素向左浮动
right：元素向右浮动

浮动后的div宽度会变成0，但是其内边框可能撑起它的宽和高。

浮动元素的特点：
1、浮动元素会脱离文档流，不会占用文档流中的位置
2、元素浮动以后，浮动元素下的块元素会自动向上移动

3、浮动元素只能向左侧或右侧移动
4、浮动元素左浮或右浮时不会超过其父元素的边界

5、浮动元素不会超过其相邻的的浮动元素
6、如果浮动元素上边有块元素，浮动元素不会上移
7、浮动元素不会覆盖文字，用于文字环绕图片

CSS文档流：css把网页分为很多层
    文档流为网页的基层，如果不设置一些特殊属性，所有的网页元素都在文档流中
    元素脱离文档流的特点：
   块元素：块元素脱离文档流后，不会独占一行，如果未给元素设置宽高，默认宽高被内容撑开
    行内元素：效果和脱离文档流的块元素一样

当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘

当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

二、简单例子

浮动实现div跟随网页变化，自适应布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,div{margin: 0;padding: 0;}
        .con{
         width: 100%;
         margin: 0 auto ;
        }
        .con div{
            float: left;
            height: 300px;
        }
        .con1{
            background-color: aqua;
            width: 30%;
        }
        .con2{
            background-color: blanchedalmond;
            width: 30%;
        }
    .con3{
        background-color: blueviolet;
        width: 40%;
    }
    </style>
</head>
<body>
    <div class="con">
        <div class="con1">第一个元素的内容</div>
        <div class="con2">第二个元素的内容</div>
        <div class="con3">第三个元素的内容</div>
    </div>
</body>
</html>

结果：