本文介绍了浮动元素在CSS布局中的作用，指出浮动只能左右浮动而不能上下。当子元素浮动后，可能导致父元素高度塌陷。为了解决这一问题，文章列举了三种方法：1)使用overflow属性；2)应用clear属性；3)利用伪元素选择器（推荐）。此外，还简单介绍了HTML的基本结构和超文本的概念。示例代码展示了浮动元素的实现，并提示读者可在指定网站上查看完整练习。
主要知识点：
1、
2、浮动只能左右，不能上下。
3、子元素浮动会造成父元素高度塌陷，
方法1：通过overflow属性
方法2：通过clear属性
方法3：通过伪元素选择器(推荐)
效果图：
参考：
css布局基础：浮动和清除浮动练习1|www.125jz.com.one img {
width: 100px;
height: 100px;
float: left;
}
.two img {
width: 100px;
height: 100px;
float: right;
}
超文本标记语言，标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接，甚至音乐
、程序等非文字元素。 超文本标记语言的结构包括“头”部分
(英语：Head)、和“主体”部分(英语：Body)，其中“头”
部提供关于网页的信息，“主体”部分提供网页的具体内容。
超文本标记语言，标准通用标记语言下的一个应用。
超文本标记语言，标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接，甚至音乐
、程序等非文字元素。 超文本标记语言的结构包括“头”部分
(英语：Head)、和“主体”部分(英语：Body)，其中“头”
部提供关于网页的信息，“主体”部分提供网页的具体内容。
超文本标记语言，标准通用标记语言下的一个应用。
说明：浮动元素脱离标准流，但不脱离文本流，后面的文本将围绕它。
本文来自投稿，不代表中国网页设计立场，如若转载，请注明出处：http://www.125jz.com/5531.html
扫一扫
226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
