浮动

2023-06-15 06:43| 来源: 网络整理| 查看: 265

改变你的文档结构，使得第一个段落与浮动的盒子共同处于类名为 wrapper 的元素之下。

Float Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.

在你的 CSS 代码中，为 .wrapper 类添加如下规则并重载页面：

.wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; }

此外，将原先的 .cleared 类移除：

.cleared { clear: left; }

你会看到，就像示例代码一样，如果将背景色属性置于段落上，那么这个背景色将处于浮动元素之下。

Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. body { width: 90%; max-width: 900px; margin: 0 auto; font: .9em/1.2 Arial, Helvetica, sans-serif } .wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; } .box { float: left; margin: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; }

再一次强调，这是因为浮动元素处于正常文档流之外，停止紧随其后元素的浮动并不像之前那样奏效。如果你想让盒子联合包住浮动的项目以及第一段文字，同时让紧随其后的内容从盒子中清除浮动，这就是一个问题。

有三种方法可以处理这个问题，其中的两种在所有浏览器中均可以奏效（虽然看上去有点“小技巧”），剩下的一种是可以处理问题的较新的解决方案。

【本文地址】

浮动

浮动

今日新闻

推荐新闻