float现象（是什么,脱标,排序,贴靠,字围,高度问题）

最新推荐文章于 2023-07-04 23:19:51 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2023-07-04 23:19:51 发布

阅读量3.4k

点赞数 8

分类专栏： css系列（精通精通）

本文链接：https://blog.csdn.net/qq_37805832/article/details/109397108

版权

css系列（精通精通）专栏收录该内容

48 篇文章 0 订阅

订阅专栏

1：网页的布局方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{padding: 0px;margin: 0px;}
        .box1
        {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .box2
        {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: right;
            margin-right: 100px;
        }
    </style>
</head>
<body>
    <span class="box1"></span>
    <span class="box2"></span>
</body>
</html>

注意一下：

float特点: 1:浮动的元素能让行内元素设置宽高. 2:记住,浮动的元素能使用内外边距. 3:浮动中不区分行内/块级/行内块级元素的.都可以设置宽高. 4:浮动元素是一种水平排版的东西. 5:浮动跟行内块级元素很像. 6:float只能水平排版. 缺点: 1:浮动中没有居中对齐,没有.只有左对齐右对齐. 2:但是不能使用margin: 0 auto;使用这样无效. 什么是水平排版? 行内元素/行内块级元素什么是垂直排版? 块级元素

效果：

在这里插入图片描述

2：浮动元素的脱标

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{padding: 0px;margin: 0px;}
        .box1
        {
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2
        {
            width: 150px;
            height: 150px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

注意一下.
什么是脱标?
1:如果一个元素设置浮动之后,他就脱离标准流了(脱标).像是浮动起来了.他会盖住没浮动的元素.

效果：
在这里插入图片描述

浮动元素排序规则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{padding: 0px;margin: 0px;}
        .box1
        {
            float: left;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .box2
        {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
         .box3
        {
            float: left;
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
        .box4
        {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>

注意一下:
相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
难点：
浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定
什么意思？
如果这个设置浮动的元素在第一行,浮动之后也会在第一行.(只不过是以浮动的形式而已)

效果：

在这里插入图片描述

浮动元素贴靠现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{padding: 0px;margin: 0px;}
        .father
        {
            width: 400px;
            height: 400px;
            background-color: yellow;
        }
        .box1
        {
            float: left;
            width: 50px;
            height: 300px;
            background-color: red;
        }
         .box2{
            float: left;
            width: 50px;
            height: 100px;
            background-color: green;
        }
        .box3{
            float: left;
            width: 250px;
            height: 100px;
            background-color: blue;
        }
        /*.box4
        {
            float: left;
            width: 500px;
            height: 500px;
            background-color: black;
        }*/
    </style>
</head>
<body>
<div class="father">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</div>
</body>
</html>

注意一下：
什么是浮动元素贴靠现象?
1.如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
2.如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元素·开始往前贴靠
3.如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边。

效果：

在这里插入图片描述

浮动元素字围现象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>62-浮动元素字围现象</title>
    <style>
        div{
            float: left;
            width: 100px;
            height: 100px;
            /*background-color: red;*/
            border: 1px solid #000;
        }
        p{
            width: 500px;
            height: 500px;
            background-color: yellow;
        }
        img{
            float: left;
        }
    </style>
</head>
<body>
<!--<div></div>-->
<img src="images/girl.jpg" alt="">
<p>1999年-2002年范冰冰一共出演了《青春出动》、《小李飞刀》、《秦始皇》、《中关村风云》、《少年包青天2》《尘埃落定》等十七部电视剧[12]  ，以及《河东狮吼》等三部电影[13]  。
    2003年在由梁羽生小说改编的电视剧《萍踪侠影》中饰演女主角云蕾。同年在冯小刚执导的贺岁档电影《手机》中饰演女主角武月[14]  。
    2004年凭借电影《手机》获得第27届大众电影百花奖最佳女主角奖，同时《手机》也获得大众电影百花奖最佳故事片奖。[2]  9月，出演根据古龙小说改编的古装剧《小鱼儿与花无缺》，饰演女主角铁心兰[15]  。同年出演《大唐芙蓉园》中的杨玉环等五部电视剧，以及电影《千机变2》和《情癫大圣》[16]  。
    2005年发行首张个人专辑《刚刚开始》，这张处女大碟由圈内多位音乐人联袂制作，包含了多种风格迥异的音乐元素。[3]  同年主演由张之亮执导的古装片《墨攻》，饰演女主角逸悦。[17]
    2006年出演电视剧《封神榜之凤鸣岐山》，饰演女主角苏妲己。之后接连拍摄《苹果》、《导火线》、《心中有鬼》等六部电影[18]  。
    2007年2月，主演的电影《苹果》入围第57届柏林国际电影节主
    范冰冰
    范冰冰(23张)
    竞赛单元，导演李玉，女主演范冰冰，男主演佟大为共同出席本届电影节。[19]  6月，范冰冰与华谊约满，自组工作室，投资拍摄民国剧《胭脂雪》，并首次担当制片人，同时饰演女主角文玉禾[20]  。10月，凭借电影《苹果》获得第四届欧亚国际电影节最佳女演员奖。[21]  同年出演《合约情人》、《精舞门》、《新宿事件》等五部电影[22]  。同年凭借电影《心中有鬼》获得第44届台湾电影金马奖最佳女配角[4]  。</p>

</body>
</html>

注意一下,
1.什么是浮动元素字围现象?
浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

效果：

在这里插入图片描述

浮动元素高度问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>64-浮动元素高度问题</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            border: 1px solid #000;
        }
        p{
            float: left;
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
<div>
    <p></p>
</div>
</body>
</html>

注意一下,
在浮动流中浮动的元素是不可以撑起父元素的高度的

效果：
在这里插入图片描述

贵哥的编程之路(热爱分享)

关注

8
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
13
评论
float现象（是什么,脱标,排序,贴靠,字围,高度问题）

float特点:1:浮动的元素能让行内元素设置宽高.2:记住,浮动的元素能使用内外边距.3:浮动中不区分行内/块级/行内块级元素的.都可以设置宽高.4:浮动元素是一种水平排版的东西.5:浮动跟行内块级元素很像.6:float只能水平排版.缺点:1:浮动中没有居中对齐,没有.只有左对齐右对齐.2:但是不能使用margin: 0 auto;使用这样无效.什么是水平排版?行内元素/行内块级元素什么是垂直排版?块级元素
复制链接

扫一扫