css浮动

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

vivianlisunny

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

阅读量175

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/vivianlisunny/article/details/76400714

版权

HTML5 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、网页布局方式
1、标准流(文档流、普通流)排版方式：浏览器默认的排版方式
1.1、在标准流中有两种排版方式：垂直排版-块级元素；水平排版–行内元素、行内块级元素

2、浮动流排版方式
2.1、只有一种排版方式：水平排版，只能设置某个元素左对齐、右对齐，没有居中对齐center；在浮动流中不能使用margin：0 auto；
2.2、在浮动流中不区分块级元素、行内元素、行内块级元素，都能水平排版
2.3、在浮动流中块级元素、行内元素、行内块级元素，都可以设置宽高
2.4、浮动元素脱标：脱离标准流，当某个元素浮动后就像从标准流中删除流一样，如果前面一个元素浮动流，后面一个元素没有浮动，那么前面一个元素会盖住后面一个元素
2.5、浮动元素排序规则：
a、相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面
b、不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动
c、浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定

<head>
    <meta charset="UTF-8">
    <title>小练习</title>
    <style>
        .box1{
            width: 50px;
            height: 50px;
            background-color: yellow;
            float: left;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: purple;

        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
        .box4{
            width: 300px;
            height: 300px;
            background-color: red;
            float: left;
        }
    </style>
</head>

<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>

3、浮动元素贴靠现象
当父元素足够宽时，会并排显示浮动元素；当父元素宽度不够时，该浮动元素会找到当前停靠的上一个元素，直至宽度足够显示或找到父元素

<head>
    <meta charset="UTF-8">
    <title>小练习</title>
    <style>
        .box1{
            width: 400px;
            height: 400px;
            background-color: yellow;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: purple;
            float: left;

        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
        .box4{
            width: 300px;
            height: 300px;
            background-color: red;
            float: left;
        }
    </style>
</head>

<body>
<div class="box1">
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
</div>
</body>

二、浮动元素高度问题
1、标准流中内容的高度可以撑起父元素的高度
2、在浮动流中浮动的元素是不可以撑起父元素的高度的
3、清除浮动方式1：给前面一个父元素设置高度
4、清除浮动的第二种方式：给后面的盒子添加clear属性，默认取值为none，按照浮动元素的排序规则来排序(左浮动找左浮动，右浮动找又浮动)；取值left为不要找前面左浮动的元素；取值right为不要找前面右浮动的元素；取值both为不要找前面左浮动和右浮动元素。注意当给某个元素添加clear属性后，该元素的margin就会失效
5、清除浮动的第三种方式：
a、外墙法：在两个盒子中间添加一个额外的块级元素，给这个块级元素设置一个clear：both属性。外墙法可以让第二个盒子使用margin-top属性，不可以让第一个盒子使用margin-bottom属性
b、内墙法：在第一个盒子中所有子元素最后添加一个额外的块级元素，给这个块级元素设置clear：both属性。内墙法可以让第二个盒子使用margin-top属性，也可以让第一个盒子使用margin-bottom属性。
外墙法不能撑起第一个盒子的高度，内墙法可以。
6、清除浮动的第四种方式：通过伪元素清除
7、overflow：hidden作用：a、可以将超出标签范围的内容剪掉；b、清除浮动；c、可以让里面的盒子设施margin-top之后，外面的盒子不被顶下来

三、伪元素选择器
作用：给指定标签的的内容前面或者后面添加一个子元素
格式：
标签名称::before{
属性名称：值
}
标签名称::after{
属性名称：值
}

    <head>
    <meta charset="UTF-8">
    <title>小练习</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: red;
        }
        div::before{
            content: "前面";
            display: block;
        }
        div::after{
            content: "后面";
            display: block;
        }
    </style>
</head>

<body>
<div>伪元素</div>
</body>

vivianlisunny

关注

0
点赞
踩
0

收藏

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

一、网页布局方式 1、标准流(文档流、普通流)排版方式：浏览器默认的排版方式 1.1、在标准流中有两种排版方式：垂直排版-块级元素；水平排版–行内元素、行内块级元素2、浮动流排版方式 2.1、只有一种排版方式：水平排版，只能设置某个元素左对齐、右对齐，没有居中对齐center；在浮动流中不能使用margin：0 auto； 2.2、在浮动流中不区分块级元素、行内元素、行内块级元素，都能水平排
复制链接

扫一扫