位置:电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
CSS入门
CSS 基础样式
CSS 高级样式
语法应用:CSS 对齐
当前阅读教程: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>
效果图

小白教程网www.2d5.net

image.png

实例:解决子元素溢出

注意:如果子元素的高度大于父元素,且子元素设置了浮动,那么子元素将溢出,这时候你可以使用 "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>
效果图

小白教程网www.2d5.net

image.png


上一篇: 左右对齐 - 使用定位方式position: absolute 下一篇: 垂直居中对齐 - 使用 padding
毕业设计网             广告联系QQ:45157718(微信同号)