行盒：独占一块，例如<span>元素
浮动盒子：设置了float属性，当一个元素浮动后，元素必定为块盒
如果文字没有在行盒中，浏览器会直接生成一个行盒将浏览器包裹起来，该行盒叫匿名行盒
行盒在排列时，会避开浮动盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./宇宙.jpg" alt="" style="width: 400px; float: left; margin-right: 20px; margin-bottom:20px ;">
<p style="word-break: break-all; text-indent: 4em;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro molestias voluptatum corporis mollitia nesciunt, tempore natus magnam accusamus iste autem laudantium, aut beatae! Harum cupiditate ex laboriosam nostrum ut. Mollitia culpa ad itaque dolores provident, iste quaerat tenetur animi corrupti corporis amet officia. Fugiat illo quos eaque numquam qui. Consequatur temporibus quibusdam rem vitae facere impedit alias sunt voluptate quae ad pariatur totam excepturi neque voluptatibus fugit assumenda, quis a harum aliquam eius, velit doloribus iste? Ratione suscipit illo culpa hic incidunt dolores quidem autem minus vitae. Fugiat doloribus voluptatibus cumque at molestiae sit alias architecto corporis eum quidem fugit odit distinctio est, sunt, ea nobis debitis culpa, quasi iure consequuntur ducimus? Vitae impedit perspiciatis quidem tempore obcaecati? Ab atque numquam tempora, praesentium laudantium quia doloremque quaerat saepe explicabo odit reiciendis ratione? Exercitationem quaerat illum fugit corporis sequi pariatur blanditiis autem minus consequuntur omnis mollitia iure magni, saepe laudantium necessitatibus quia. Cumque ut cum officia id incidunt odit, placeat inventore enim, ratione eius, similique magnam nam harum. Omnis neque dolorum dolorem dolor autem, optio a qui earum necessitatibus, commodi veritatis sequi! Praesentium nesciunt iste eligendi deserunt iusto eos cupiditate hic vel vitae dolore quo a sed velit nostrum culpa, quae earum dolorem. Eum fuga provident unde facere consequuntur, voluptates dolorum culpa impedit excepturi nihil animi, quae esse pariatur placeat ullam, sit eligendi. Consequatur quaerat quibusdam, suscipit debitis quasi minus animi eveniet assumenda, quis, aliquam officia? Repellat totam dolorum voluptas, tempora aliquam non esse, ea eos vero aspernatur obcaecati corporis atque a optio laboriosam quasi. Iste magni suscipit vel quae doloribus molestias, non est laborum deserunt ea eaque! Dicta inventore, tempora asperiores maiores tempore, accusantium pariatur aliquid consectetur, nisi fugit id. Rerum reiciendis magnam, tempora, recusandae ducimus non alias praesentium officiis debitis voluptate iusto natus distinctio delectus error nulla ipsam cum, itaque architecto quibusdam aspernatur! Assumenda ipsum illum similique eligendi tempora totam sunt quidem expedita sit eos reprehenderit quia error recusandae officiis deleniti unde cupiditate excepturi blanditiis, doloremque voluptates optio. Itaque autem ducimus aperiam molestias iste ullam asperiores laborum cupiditate? Repellendus aperiam beatae, itaque sint perspiciatis cupiditate saepe veritatis tenetur repellat eos sequi minima mollitia culpa nesciunt corporis! Consectetur voluptatem, natus dolore totam assumenda labore. Iusto sunt, quos assumenda porro deleniti, reiciendis atque omnis quae laudantium eaque inventore sed quasi? Commodi esse dolore qui alias dolorem, voluptates ut. Repudiandae blanditiis, eaque earum dolorum iusto ex iste maiores quod temporibus debitis sed accusamus delectus, eius molestiae consequatur officia illum obcaecati facere fuga? Voluptas earum optio blanditiis labore recusandae ex maiores repudiandae numquam doloribus voluptates nesciunt ullam ad ducimus commodi repellendus hic ipsam perferendis, ipsa eligendi itaque! Magnam, voluptate! Laudantium blanditiis quis cum placeat at, eaque fugit quod quaerat aut animi modi illum sit. Quae non optio minima corrupti laborum excepturi eligendi omnis impedit, beatae, molestiae iste nihil nulla ex, et itaque sint cum aut. Obcaecati ipsa commodi, et optio dolore corrupti voluptatibus exercitationem amet nam officia nemo reiciendis fuga, in aspernatur voluptates necessitatibus facilis beatae vel, iusto ipsum soluta quisquam laboriosam blanditiis.</p>
</body>
</html>页面显示效果：
其中：
<img src="./宇宙.jpg" alt="" style="width: 400px; float: left; margin-right: 20px; margin-bottom:20px ;">float:left 元素左浮动
margin-right 元素右外边距
<p style="word-break: break-all; text-indent: 4em;">work-break:break-all 断词规则，这里值在文字处截断
text-indent :4em 首行缩进
2838
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
