CSS渡一教程学习笔记(十一)--浮动模型

最新推荐文章于 2021-08-04 02:58:10 发布

zhou_shadow

最新推荐文章于 2021-08-04 02:58:10 发布

阅读量205

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/zhou_shadow/article/details/91989199

版权

css 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

模型总共有3中

1.盒子模型
2.层模型
3.浮动模型:float:left/right;

浮动元素

浮动元素中占位边界不足，则自动换行。
浮动元素产生了浮动流，所有产生了浮动流的元素
块级元素看不到他们，产生了BFC的元素和文本类(inline)属性
的元素以及文本都能看到浮动元素。
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动模型</title>
</head>
<style>
    .div1{
        float:left;
        width:200px;
        height:200px;
        background-color:blue;
        opacity: 0.5;
    }
    .div2{
        display:inline-block;
        width:300px;
        height:300px;
        background-color:#FFCCEE;
    }
</style>
<body>
<div class="div1">1111111</div>
<span>456</span>
<div class="div2">77777777777777777</div>
</body>
</html>

结果:
在这里插入图片描述
class="div2"去掉属性：display:inline-block;默认为：display:block，块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动模型</title>
</head>
<style>
    .div1{
        float:left;
        width:200px;
        height:200px;
        background-color:blue;
        opacity: 0.5;
    }
    .div2{
        width:300px;
        height:300px;
        background-color:#FFCCEE;
    }
</style>
<body>
<div class="div1">1111111</div>
<span>456</span>
<div class="div2">77777777777777777</div>
</body>
</html>

结果：
在这里插入图片描述
可以看到div2"看不到"div1。

实现父级包住浮动元素的问题。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>去除父子元素的浮动</title>
    <style>
        .parent{
            border:1px solid red;
        }
        .child1,child2,child3{
            float:left;
            width:100px;
            height:100px;
            background-color:green;
        }
        p{
        /*清除p标签周边的浮动元素的浮动效果，
        清除p标签结构上的左右浮动的元素。notice:
        想要清除浮动元素，clear属性对应的标签元素必须是
        块级元素。
        */
            clear:both;
            border:0px solid black;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child1"></div>
    <div class="child1"></div>
    <div class="child1"></div>
    <div class="child1"></div>
<!--此时父元素为div块级元素，不能捕获浮动元素，也不能用外边框包含-->
    <p></p>
</div>
</body>
</html>

清除p标签周边的浮动元素的浮动效果，清除p标签结构上的左右浮动的元素。notice:想要清除浮动元素，clear属性对应的标签元素必须是块级元素。
后面还可以利用伪元素类来清除浮动。 在这里插入图片描述

zhou_shadow

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS渡一教程学习笔记(十一)--浮动模型

模型总共有3中1.盒子模型2.层模型3.浮动模型:float:left/right;浮动元素浮动元素中占位边界不足，则自动换行。浮动元素产生了浮动流，所有产生了浮动流的元素块级元素看不到他们，产生了BFC的元素和文本类(inline)属性的元素以及文本都能看到浮动元素。代码:<!DOCTYPE html><html lang="en"><hea...
复制链接

扫一扫