一、浮动元素的字围现象


div{

            float:left;

            width:100px;

            height:100px;

            background-color: red;

            border:1px solid black;

        }

        p{

            width:500px;

            height:500px;

            background-color: yellow;

​

        }

    </style>

</head>

<body>

<div>我是div</div>

<p>新浪娱乐讯 30日，PGone发文回应与李小璐[微博]亲密视频被曝光一事，称视频是去年3、4月份拍的，2017年12月“夜宿门”曝光后自己停止了所有的工作，表示自己和李小璐在彼此最痛苦的时候相互鼓励扛过最阴暗的时期，的确产生过感情。最后对粉丝道歉，感谢这两年的陪伴，表示未来还是会继续做音乐。

​

​

    　　全文如下：视频是去年3、4月份的，在17年12月底被全网抨击的时候我有解释过，谁信了？一篇被人代写的文章使全网狂欢，李看完文章当时就昏过去了，谁坐实了这件事？细思极恐。接着把我打入无底深渊，停止所有工作，没有公司，没有公关团队，没有钱，所有的事情只能问李和她商量怎么处理、怎么面对。你们真的天真以为某些人可怜至极？这可怕的圈子你们想象不到。为什么去年拍的视频没有任何外传的前提下会被放出来还没有logo？为什么我名字一直上不了热搜这次突然上了？这后面到底谁在操作？当初红的时候疯了一样要签我，拒绝后发生种种事情？回归正题，是的，我跟李在彼此最痛苦的时候相互鼓励扛过最阴暗的时期，由此的确产生过感情。你们没有经历过，根本没办法想象我那段日子是怎么扛过来的！每天睡醒不愿意去面对这个世界，对所有一切事物不再感兴趣。我道过歉，没人听，我承认过错误，没人认，两年了还死盯着我不放，你们不就是想让我死吗？现在好了，我十恶不赦的人设全被扣上了，歌曲教唆吸毒，做头发！还有什么？我从没害过任何人！我对不起我妈！对不起关心我的家人！对不起支持我的粉丝！但我他妈虔诚的认错想要改变的时候你们他妈谁给过我机会！！！？我杀人还是他妈放火了？！？最后和对我失望的粉丝说句对不起！感谢这两年一直陪伴我，没有你们我一样挺不过来。脱粉的希望你们下一个喜欢的人不会再让你们失望，音乐我还是会继续做，不就是想弄死我吗？来啊！喜欢听你们就继续听，不喜欢的就取关我吧。祝大家一切都好。

我们可以看到​这里的是：浮动+非浮动的模式，那么这里的浮动标签就把非浮动的盖住了一部分，有趣的是非浮动的里面有文字，这里面的文字就围绕在了这个浮动标签的周围，这就是浮动的字围效果，这里可应用到图文混排​。

二、我们做一次浮动的练习

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D127_FloatExercise</title>

    <style>

        .Box1{

            border:1px black solid;

            width:1400px;

            height:600px;

            background-color: yellow;

        }

        .box1{

            width:400px;

            height:500px;

            border:1px solid red;

            float:left;

            background-color: red;

            margin:10px;

        }

        .box2{

            width:900px;

            height:500px;

            border:1px solid white;

            float:right;

            /*background-color: red;*/

            margin:10px;

        }

        .box3{

            width:400px;

            height:500px;

            border:1px solid red;

            float:left;

            background-color: black;

            margin:10px;

        }

        .box4{

            width:400px;

            height:500px;

            border:1px solid blue;

            float:right;

            background-color: green;

            margin:10px;

        }

</style>

</head>

<body>

<div class="Box1">

    <div class="box1"></div>

    <div class="box2">

        <div class="box3"></div>

        <div class="box4"></div>

    </div>

</div>

</body>

</html>

注意：我们进行设计页面的时候，通常在垂直方向上使用标准流，在水平方向上，我们使用浮动流，我们上面举得这个例子就是在水平方向上进行排版，这种方式是通过大盒子嵌套小盒子来达成目标的，我们也可以用贴靠现象来进行排版。​

三、源码：

D126_FloatElementZiWei.html

D127_FloatExercise.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D126_FloatElementZiWei.html

https://github.com/ruigege66/HTML_learning/blob/master/D127_FloatExercise.htmll

2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）

3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包

HTML连载46-浮动元素字围现象、浮动练习的更多相关文章

  1. H5 62-浮动元素字围现象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. HTML连载45-浮动元素脱标、排序规则、贴靠现象

    一.浮动元素脱标 1.什么是浮动元素脱标 脱标:脱离标准流. 当某一个元素浮动之后,那么这个元素看上去就像被从标准流中删除了一样 2.浮动元素脱标之后有什么影响 如果前面一个元素浮动了,而后面的一个元 ...

  3. H5 61-浮动元素贴靠现象

    61-浮动元素贴靠现象 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  4. CSS 教程 - 闭合浮动元素

    按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列. 因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素. 但是有时我 ...

  5. html 浮动元素

    在CSS布局中分为内联元素(display:inline)和块状元素(display:block),块状元素默认会占据一行,可设置高度宽度以及边距,而内联元素不会也不能设置.常见的内联元素有:a.sp ...

  6. HTML连载47-设计思想、浮动元素高度问题

    一.设计网页的思想 拿到需求之后我们先对各个模块(盒子)进行划分,然后从外到内进行设计(1)设计一个盒子最基本的设计大致包括背景颜色(其实用于识别),宽,高,边界浮动流还是标准流. (2)然后盒子和盒 ...

  7. 使用样式“clear”和“overflow”消除浮动元素对环绕行框的影响

    为元素设置“float”样式之后,元素会脱离标准文档流,不再占据原来的空间.后续元素会向前移动,占据这个新的空间.后续的文本会围绕着浮动元素分布,形成一种环绕布局的现象. 示例代码: <!DOC ...

  8. 关于BFC不会被浮动元素遮盖的一些解释

    简介 在清除浮动一文中提到BFC不会被浮动元素遮盖,并没有详细探究表现行为.规范中指出,在同一个BFC内,作为子元素的BFC的border-box不应该覆盖同为子元素的浮动元素的margin-box. ...

  9. HTML。CSS浮动元素详解

    浮动定位是指 1.1将元素排除在普通流之外,即元素将脱离标准文档流 1.2元素将不在页面占用空间 1.3将浮动元素放置在包含框的左边或者右边 1.4浮动元素依旧位于包含框之内 2. 浮动的框可以向左或 ...

随机推荐

  1. Scrum Framework, Process and Story Point

    Scrum Framework Roles Ceremonies Artifacts Scrum Master Sprint Planning Product Backlog Product Owne ...

  2. CentOS连接Wifi

    原文地址:https://blog.csdn.net/zhuangm_888/article/details/53868451   1. 查看是否需要安装固件 大多无线网卡还需要固件.内核一般会自动探 ...

  3. 更新阿里yum源并重建缓存

    [第一种方式]1.下载安装wget /如果没有装的话yum install -y wget 2.备份默认的yummv /etc/yum.repos.d /etc/yum.repos.d.backup ...

  4. Java8特性

    java8特性 Oracle 公司于 2014 年 3 月 18 日发布 Java 8 ,它支持函数式编程,新的 JavaScript 引擎,新的日期 API,新的Stream API 等. 1.la ...

  5. java 后台上传文件

    java 后台上传文件 public static String uploadFile(File file, String RequestURL) throws IOException { Strin ...

  6. C语言程序设计100例之（19）：欢乐的跳

    例19   欢乐的跳 题目描述 一个n个元素的整数数组,如果数组两个连续元素之间差的绝对值包括了[1,n-1]之间的所有整数,则称之符合“欢乐的跳”,如数组1 4 2 3符合“欢乐的跳”,因为差的绝对 ...

  7. 急速下载pandas

    使用国内源进行下载: pip install -i https://pypi.tuna.tsinghua.edu.cn/simple --trusted-host pypi.tuna.tsinghua ...

  8. SQL查询语法30例

    学好SQL查询:无他,概手熟耳. 1. 基础表: 学生表: 老师表: 课程表: 成绩表: 2. 题目: 1.查询名字中含有"华"字的学生信息 select * from 学生 wh ...

  9. Linux系统：Centos7环境搭建Redis单台和哨兵集群环境

    本文源码:GitHub·点这里 || GitEE·点这里 一.环境和版本 Linux:centos7 三台 三台Linux服务 192.168.72.129 192.168.72.130 192.16 ...

  10. Java 添加Word脚注、尾注

    Word中的脚注和尾注都是对文本的补充说明.脚注一般是附在书页最左下端的注文,用以解释.说明特定内容:而尾注则是位于文档末尾,用于列出引文的出处.脚注和尾注都可以是针对某些文字或者段落来添加.本文中, ...