主要知识点：
1、浮动：让元素脱离标准流，从而实现灵活的布局效果。
2、浮动只能左右，不能上下。float:left/right/none。
3、子元素浮动会造成父元素高度塌陷，清除浮动的3种方法：
- 方法1：通过overflow属性
- 方法2：通过clear属性
- 方法3：通过伪元素选择器（推荐）
效果图：
参考：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css布局基础：浮动和清除浮动练习1|www.125jz.com</title>
<style>
.one img {
width: 100px;
height: 100px;
float: left;
}
.two img {
width: 100px;
height: 100px;
float: right;
}
</style>
</head>
<body>
<div class="one">
<img src="img/03-03.jpg" />
<p>超文本标记语言，标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接，甚至音乐
、程序等非文字元素。 超文本标记语言的结构包括“头”部分
（英语：Head）、和“主体”部分（英语：Body），其中“头”
部提供关于网页的信息，“主体”部分提供网页的具体内容。
超文本标记语言，标准通用标记语言下的一个应用。
</p>
</div>
<div class="two">
<img src="img/03-03.jpg" />
<p>超文本标记语言，标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接，甚至音乐
、程序等非文字元素。 超文本标记语言的结构包括“头”部分
（英语：Head）、和“主体”部分（英语：Body），其中“头”
部提供关于网页的信息，“主体”部分提供网页的具体内容。
超文本标记语言，标准通用标记语言下的一个应用。
</p>
</div>
</body>
</html>
- 说明：浮动元素脱离标准流，但不脱离文本流，后面的文本将围绕它。
本文来自投稿，不代表125jz立场，如若转载，请注明出处：http://www.125jz.com/5531.html
微信扫一扫 
支付宝扫一扫 