html:
    代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <link rel="stylesheet" href="../css/reset.css">
    8.     <link rel="stylesheet" href="../css/61浮动的特点.css">
    9. </head>
    10. <body>
    11.     <div class="box1">中华有为</div>
    12.     <p>鲁迅作品集
    13.         彷徨
    14.         呐喊
    15.         朝花夕拾
    16.         阿Q正传
    17.         故事新编
    18.         鲁迅作品->华盖集->正文
    19.         背景：                   字号：小 中 大 加大  默认
    20.         咬文嚼字
    21.         　　一
    23.         　　以摆脱传统思想的束缚而来主张男女平等的男人，却偏喜欢用轻靓艳丽字样来译外国女人的姓氏：加些草头，女旁，丝旁。不是“思黛儿”，就是“雪琳娜”。西洋和我们虽然远哉遥遥，但姓氏并无男女之别，却和中国一样的，——除掉斯拉夫民族在语尾上略有区别之外。所以如果我们周家的姑娘不另姓绸，陈府上的太太也不另姓蔯，则欧文（2）的小姐正无须改作妪纹，对于托尔斯泰（3）夫人也不必格外费心，特别写成妥鉐丝苔也。
    25.         　　以摆脱传统思想的束缚而来介绍世界文学的文人，却偏喜欢使外国人姓中国姓：Gogol姓郭；Wilde姓王；D’An－nunzio姓段，一姓唐；Holz姓何；Gorky姓高；Galsworthy也姓高，（4）假使他谈到Gorky，大概是称他“吾家rky”（5）的了。
    27.         　　我真万料不到一本《百家姓》（6），到现在还有这般伟力。
    29.         　　一月八日。
    31.         　　二
    33.         　　古时候，咱们学化学，在书上很看见许多“金”旁和非“金”旁的古怪字，据说是原质（7）名目，偏旁是表明“金属”或“非金属”的，那一边大概是译音。但是，鏭，鎴，锡，错，矽（8），连化学先生也讲得很费力，总须附加道：“这回是熟悉的悉。
    35.         　　这回是休息的息了。这回是常见的锡。”而学生们为要记得符号，仍须另外记住腊丁字。现在渐渐译起有机化学来，因此这类怪字就更多了，也更难了，几个字拼合起来，像贴在商人帐桌面前的将“黄金万两”拼成一个的怪字（9）一样。中国的化学家多能兼做新仓颉（10）。我想，倘若就用原文，省下造字的功夫来，一定于本职的化学上更其大有成绩，因为中国人的聪明是决不在白种人之下的。
    37.         　　在北京常看见各样好地名：辟才胡同，乃兹府，丞相胡同，协资庙，高义伯胡同，贵人关。但探起底细来，据说原是劈柴胡同，xx子府，绳匠胡同，蝎子庙，狗尾巴胡同，鬼门关。字面虽然改了，涵义还依旧。这很使我失望；否则，我将鼓吹改奴隶二字为“弩理”，或是“努礼”，使大家可以永远放心打盹儿，不必再愁什么了。但好在似乎也并没有什么人愁着，爆竹毕毕剥剥地都祀过财神了。
    39.         　　二月十日。
    41.         　　（1）本篇最初分两次发表于一九二五年一月十一日、二月十二日北京《京报副刊》。
    43.         　　本篇第一节发表后，即遭到廖仲潜、潜源等人的反对，作者为此又写了《咬嚼之余》和《咬嚼未始“乏味”》二文（收入《集外集》）予以反驳，可参看。
    45.         　　（2）欧文英、美人的姓。如美国有散文家华盛顿，欧文（W．Irving，1783—1859）。
    47.         　　（3）托尔斯泰俄国人的姓。如俄国作家列夫·托尔斯泰（B．C．DEFGHEI，1828—1910）。
    49.         　　（4）Gogol果戈理（H．B．JEKELM，1809—1852），曾有人译为郭歌里，俄国作家，Wilde，王尔德（1856—1900），英国作家。D’An－nunzio，邓南遮（1863—1938），曾有人译为唐南遮，意大利作家。
    51.         　　Holz，何尔兹（1863—1929），德国作家。Gorky，高尔基（M．JENMOPI，1868—1936）：苏联无产阶级作家。Galsworthy，高尔斯华绥（1867—1933），英国作家。
    53.         　　（5）“吾家rky”即吾家尔基。旧时常称同宗的人为“吾家某某”，有些人为了攀附名人，抬高自己，连同姓的也都称“吾家某某”。
    55.         　　这里是对当时某些文人把“高尔基”误为姓高名尔基的讽刺。
    57.         　　（6）《百家姓》旧时学塾所用的识字课本。宋初人编，系将姓氏连缀为四言韵语，以便诵读。
    59.         　　（7）原质元素的旧称。
    61.         　　（8）鏭，，锡，错，矽化学元素的旧译名。其中除锡外，其他四种的今译名顺序为铯、锶、铈、硅。
    63.         　　（9）“黄金万两”拼成的怪字，其形如“驀”。
    65.         　　（10）仓颉亦作“苍颉”，相传是黄帝的史官，汉字最初的创造者。
    67.         上一章 回目录 下一章 （方向键翻页，回车键返回目录）加入书签
    68.         © 2015 鲁迅作品 (http://luxun.zuopinj.com) 免费阅读
    70.         </p>
    71. </body>
    72. </html>

    css:
    （1）将块元素设置为float之后，文本会围绕着块元素，而不会被覆盖
    （2）如果不对块元素设置宽和高，并且设置float之后，那么宽高有内容撑开
    （3）行内元素无法设置width和height，但是当行内元素设置float,之后，那就可以设置宽度和高度了
    （4）脱离文档流之后，不再区分行内和块元素

    代码：

    .box1 {
    background-color: hotpink;
    float: left;
}

span {
    width: 300px;
    height: 300px;
    float: left;
}

    image.png