前端应用_css_浮动特性

最新推荐文章于 2020-09-09 21:14:17 发布

上海_彭彭

最新推荐文章于 2020-09-09 21:14:17 发布

阅读量228

点赞数

分类专栏： css 文章标签： css 浮动

本文链接：https://blog.csdn.net/qq_34979346/article/details/97613479

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

了解浮动之前得先知道什么是文档流。

文档流是指：盒子按照html标签编写的顺序依次从上到下，从左到右，块元素占一行，行内元素在一行之内从左到右依次排列，
每个盒子都占自己的位置。

浮动的特性

浮动分为两种一个是左浮动，另一个是右浮动
浮动元素遇到无论什么类型元素都要停下来。
浮动元素能让内联元素或者块元素转化为内联块元素同时具有两者的特性
相邻浮动的块元素可以并在一行超出父元素的宽度自动换行
浮动元素和不是浮动元素呆在一起能形成绕图效果

每个特性我都用例子介绍，方便理解

2，3，4 可以在一个例子全部体现出来。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>margin塌陷</title>
    <style type="text/css">
        .box,.box1{
        width:200px;
        height:100px;
        background-color:gold;
        float:left;
        margin:10px;
        }
        .box1{
        float:right
        }
    </style>
</head>
<body>
<div class="box">1</div>
<div class="box1">2</div>
<div class="box">1</div>
<div class="box">1</div>
<a href="#" class="box">我是一个元素</a>
<div class="box">1</div>
<div class="box">1</div>


</body>
</html>

效果如下：
在这里插入图片描述
块元素真的排列在一行，内联元素也具备了 width 和height 特性，当不够的时候真的换行了，碰到有边界的时候也停止了。

2 是靠右浮动，直接跳过了文档流。

下边演示浮动绕图的效果。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>margin塌陷</title>
    <style type="text/css">
        .box{
        width:100px;
        height:50px;
        background-color:gold;
        float:left;
        margin:20px;
        }
        .box1{
          width:400px;
        height:200px;
        background-color:green;
        }
    </style>
</head>
<body>
<div class="box">1</div>
<div class="box1">1. 浮动分为两种 一个是左浮动 ，另一个是右浮动
2. 浮动元素 遇到 无论什么类型元素都要停下来。
3. 浮动元素 能让内联元素 或者 块元素转化为 内联块元素 同时具有两者的特性
4. 相邻浮动的块元素可以并在一行 超出父元素的宽度 自动换行
5. 浮动元素和不是浮动元素呆在一起 能形成绕图效果
</div>


</body>
</html>

效果如下：
在这里插入图片描述
绕图浮动慎用，不好控制。

上海_彭彭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端应用_css_浮动特性

了解浮动之前得先知道什么是文档流。文档流是指：盒子按照html标签编写的顺序依次从上到下，从左到右，块元素占一行，行内元素在一行之内从左到右依次排列，每个盒子都占自己的位置。浮动的特性浮动分为两种一个是左浮动，另一个是右浮动浮动元素遇到无论什么类型元素都要停下来。浮动元素能让内联元素或者块元素转化为内联块元素同时具有两者的特性相邻浮动的块元素可以并在一行超...
复制链接

扫一扫

专栏目录