 |
位置：电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：CSS入门到精通 > 左右对齐 - 使用 float 方式 | |
| 阅读(22555525) 收藏 赞(5685) 分享 | |
| 上一篇： 左右对齐 - 使用定位方式position: absolute | 下一篇： 垂直居中对齐 - 使用 padding |
左右对齐 - 使用 float 方式实例我们也可以使用 float 属性来对齐元素 代码<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>左右对齐 - 使用 float 方式</title>
<!--定义内部样式-->
<style>
.css1 {
float: right;/*向右浮动*/
width: 300px;/*宽度*/
border: 3px solid #73AD21;/*边框*/
padding: 10px;/*内边距*/
}
</style>
</head>
<body>
<h2>右对齐</h2>
<p>以下实例演示了使用 float 属性来实现右对齐:</p>
<div>
欢迎收听，黄菊华老师的web全栈系列课
</div>
</body>
</html>效果图
实例：解决子元素溢出注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题: 代码<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>左右对齐 - 使用 float 方式 - 解决子元素溢出</title>
<!--定义内部样式-->
<style>
div {
border: 3px solid #4CAF50; /*边框*/
padding: 5px;/*内边距*/
}
.img1 {
float: right;/*浮动*/
}
.clearfix {
overflow: auto;/*溢出*/
}
.img2 {
float: right;/*浮动*/
}
</style>
</head>
<body>
<p>以下实例图在父元素中溢出，很不美观:</p>
<div>
<img src="img/tx01.jpg" >
欢迎大家学习黄菊华老师的web全栈就业课程
</div>
<p style="clear:right">在父元素上通过添加 clearfix 类，并设置 overflow: auto; 来解决该问题:</p>
<div>
<img src="img/tx01.jpg" >
欢迎大家学习黄菊华老师的web全栈就业课程
</div>
</body>
</html>效果图
|
|
| 上一篇： 左右对齐 - 使用定位方式position: absolute | 下一篇： 垂直居中对齐 - 使用 padding |
