css案例学习之float浮动

简介:

代码:

复制代码
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float属性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }

.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }

.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }

.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }

    
.son1{
/* 这里设置son1的浮动方式*/

}

.son2{
/* 这里设置son1的浮动方式*/

}

.son3{
/* 这里设置son1的浮动方式*/

}

</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字.</p>
    </div>
</body>
</html>
复制代码

 

代码:

复制代码
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float属性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }

.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }

.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }

.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }

    
.son1{
/* 这里设置son1的浮动方式*/
float:left;
}

.son2{
/* 这里设置son1的浮动方式*/
float:left;
}

.son3{
/* 这里设置son1的浮动方式*/
float:left;
}

</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div> <!-- 当所有div都浮动的时候,块空间就不占据一行了,下面的内容会自动填充 ,div只占据属于自己的那一部分,后面的元素会自动补齐行剩余空间-->
        <p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字.</p>
    </div>
</body>
</html>
复制代码

说明:浏览器宽度改变时,样子相应的也会改变,浮动之后,默认的占据一行的宽度没有了,剩下的是css中设置的padding、margin、width、height等效果。

代码:

复制代码
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float属性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }

.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }

.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }

.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }

    
.son1{
/* 这里设置son1的浮动方式*/
float:left;
}

.son2{
/* 这里设置son1的浮动方式*/
float:left;
}

.son3{
/* 这里设置son1的浮动方式*/
float:right;
}

</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字.</p>
    </div>
</body>
</html>
复制代码

说明:div1、div2左浮动,div3右浮动,p文字被夹中间。

div1 div3 左浮动 div2 右浮动

 

代码:

复制代码
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float属性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }

.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }

.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }

.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    clear:right;
    }

    
.son1{
/* 这里设置son1的浮动方式*/
float:left;
}

.son3{
/* 这里设置son3 的浮动方式*/
float:right;
}

.son2 {
/* 这里设置son2 的浮动方式*/
float:left;
}

</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3<br/>Box-3<br/>Box-3<br/>Box-3<br/></div> <!-- 换行重新占据了三行内容 -->
        <p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字.</p>
    </div>
</body>
</html>
复制代码

说明:有了br之后,浮动元素所在行又被重新占据了,p元素不会上来填充。

代码:

复制代码
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float属性</title>
<style type="text/css">
body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }

.father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;                
    }

.father div{
    padding:10px;                
    margin:15px;                    
    border:1px dashed #111111;
    background-color:#90baff;
    }

.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    clear:right;
    }

    
.son1{
float:left;
/* 这里设置son1的浮动方式*/

}

.son2{
/* 这里设置son1的浮动方式*/

float:left;
}

.son3{
/* 这里设置son1的浮动方式*/
float:right;
}

.father .clear{
margin:0;
padding:0;
border:0;
clear:both;    }


</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <div class="clear"></div>
        <p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字.</p>

    </div>
</body>
</html>
复制代码

说明:添加一个clear:both;属性之后,之前的空当地方就会被清理掉,p元素就只能另起一行了。


本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/4987724.html,如需转载请自行联系原作者

相关文章
|
3月前
|
前端开发
CSS实现充电效果案例
CSS实现充电效果案例
86 1
|
1月前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
1月前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
36 2
学习CSS3 中的渐变、阴影与遮罩
CSS3的渐变、阴影和遮罩特性极大地丰富了网页设计。渐变让颜色平滑过渡,赋予页面流动美感;阴影增加元素立体感,引导视觉焦点;遮罩通过隐藏或显示部分元素创造独特视觉效果。这些特性组合使用,可打造丰富多彩、立体生动的视觉体验,并可通过CSS3动画增强动态效果,使网页更具活力。正确应用这些特性需考虑参数调整及跨浏览器兼容性,以确保最佳展示效果。
|
3月前
|
前端开发
前端基础(十一)_Float浮动、清除浮动的几种方法
本文介绍了浮动的概念、属性、特性以及清除浮动的几种方法,并通过实例演示了如何使用CSS实现元素的浮动和处理浮动带来的问题。
101 3
|
2月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
38 0
|
3月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`&lt;div&gt;`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
|
3月前
元素的浮动属性float
元素的浮动属性float。
18 6
|
3月前
|
前端开发
|
3月前
|
Web App开发 移动开发 自然语言处理
下一篇
DataWorks