css浮动

最新推荐文章于 2023-03-25 16:12:57 发布

honeyws

最新推荐文章于 2023-03-25 16:12:57 发布

阅读量206

点赞数

分类专栏： Web前端基础文章标签： css浮动

本文链接：https://blog.csdn.net/weixin_44802155/article/details/103001814

版权

Web前端基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

css浮动
网也布局的核心–就是css来拜访盒子
css提供啦三种机制来设置盒子的拜访位置，普通流。浮动和定位
1，普通流
块级元素会独占一行，从上到下顺序排列
常用元素：div hr p h1-h6 dl form table
行内元素会按顺序，从左到右顺序排列，碰到父元素边缘则自动换行：
常用元素：span a i em等
演示块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        div{
            width:100x;
            background-color:red ;
        }
    </style>
</head>
<body>
    <div>123</div>
    <div>abc</div>
</body>
</html>

演示行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        div{
            width:100x;
            background-color:red ;
        }
    </style>
</head>
<body>
    <span>行内元素</span>
    <span>行内元素</span>
    <span>行内元素</span>
    <span>行内元素</span>
    <span>行内元素</span>
    <span>行内元素</span>
    <span>行内元素</span>
    <span>行内元素</span>
</body>
</html>

什么是浮动
概念：元素的浮动是指设置啦浮动属性的元素会
1.脱离标准普通流的控制
2.移动到指定位置
作用
1。让多个盒子（div) 水平排成一行，使得浮动成为布局的重要手段。
2.可以实现盒子的左右对齐等等。。。
3.浮动最早是用来控制图片，实现文字环绕图片的效果
语法
在css中通过float，属性定义浮动
选择器{ float：属性值；}
属性值
none 元素不浮动
left 元素向左浮动
right 元素向右浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
      img{
          /*float: left;*/
          float: right;
      }
    </style>
</head>
<body>
    <img src="123.jpg" alt="">
</body>
</html>

1浮动口诀之浮
浮动–浮漂浮在普通流上，脱离标准流。俗称"脱标"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动口诀之浮</title>
        <style>
        .qwe{
        不再是标准流啦，漂浮起来了，浮在啦标准流上
            float: right;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .asd{
            width: 200px;
            height: 200px;
            background-color:purple;
        }
        </style>
</head>
<body>
    <div class="qwe"></div>
    <div class="asd"></div>
</body>
</html>

小结
float属性会让盒子漂浮在标准流上，所以第二个标准流的盒子就跑到浮动盒子的底下了。
2浮动口诀漏
浮动–漏浮动的盒子，把自己原来的位置楼给下面标准流的盒子，就是不占原来位置，是脱离标准流的，我们俗称"脱标"。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        <style>
        .qwe{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
            /*让第一个盒子漂浮起来，不占位置*/
        }
        .asd{
            width: 150px;
            height: 300px;
            background-color:purple;
        }
        </style>
</head>
<body>
    <div class="qwe"></div>
    <div class="asd"></div>
</body>
</html>

所以asd下面的其实就是跑到qwe盒子下面了，被qwe给压住了，遮挡起来了。
浮动口诀特
浮动-特性 float属性会改变元素display属性。
任何元素都可以浮动，浮动元素会生成一个块级框，而不论他本身是何种元素。生成的块级框和行内块及其相似。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动口诀之特</title>
    <style>
    /*这个盒子div添加浮动之后，仍然是块级元素
    默认想当于转换为啦inline-blok*/
        div{
            width: 200px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div> 天往盖地虎，宝塔镇河妖</div>
</body>
</html>

honeyws

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css浮动

css浮动网也布局的核心–就是css来拜访盒子css提供啦三种机制来设置盒子的拜访位置，普通流。浮动和定位1，普通流块级元素会独占一行，从上到下顺序排列常用元素：div hr p h1-h6 dl form table行内元素会按顺序，从左到右顺序排列，碰到父元素边缘则自动换行：常用元素：span a i em等...
复制链接

扫一扫