css浮动模型初理解
来源:互联网 发布:迈克尔芬利数据 编辑:程序博客网 时间:2024/06/06 03:59
浮动模型,开始之初是为了解决图文布局而产生的。大家都知道,块级元素是按照从上到下排列的,并且尽管设置了宽度仍然独自霸占一行,如何让块级元素不独占一行,让在宽度之外让其他标签占用呢?这就需要浮动模型了。
要设置浮动,就要设置一个float属性。这个float属性有三个值,分别是left左浮动,right又浮动和none不浮动。设置了float属性的元素,会向一边靠拢,直到触碰到标签的边界为止(在盒模型中边界包括margin)。如以下代码:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1{
height: 20px;
width: 100px;
background-color: red;
}
.div2{
height: 20px;
width: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="div1">演示1</div>
<div class="div2">演示2</div>
</body>
</html>
将其中的css样式改为
.div1{
height: 20px;
width: 100px;
background-color: red;
float: left;
}
.div2{
height: 20px;
width: 100px;
background-color: blue;
float: left;
}
就可以看到,两个块级元素乖乖的排在一行上了(大家也可以试着把其中一个left改为right,可更直观了解float属性)
当然,设置了float属性的元素依然处于标准文档流中,会对后面的元素产生影响,例如这段代码:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1{
height: 20px;
width: 100px;
background-color: red;
float: left;
}
.div2{
height: 20px;
width: 100px;
background-color: blue;
float: right;
}
</style>
</head>
<body>
<div class="div1">演示1</div>
<div class="div2">演示2</div>
<p>1111111111111111111111111111111111111</p>
</body>
</html>
我们想让<P>标签在<div>下面,但是由于设置了浮动,它跑到两个div标签中间去了,达不到我们期望的效果,怎么办,当然有办法。
常用的清除浮动的影响的有clear,分别可以设置left,right 和 both,分别代表清除左浮动影响,清除右浮动影响和同时清除两个浮动影响。另外还有可以设置元素宽度width:100%或者固定宽度,并且设置overflow:hidden属性,也就是超出宽度自动隐藏属性(也就是移出属性)。对上述代码加上
p{
clear: both;
}
或者
p{
width: 100%;
overflow: hidden;
}
都能达到想要的效果。
- css浮动模型初理解
- css:浮动的理解。
- 图文理解css浮动
- 我对 CSS 流动模型 浮动模型 层模型 的理解
- CSS基本思想-浮动模型
- CSS盒子模型和浮动
- css层模型初理解
- css的布局模型(二)---浮动模型
- 【CSS布局模型】流动模型、浮动模型、层模型
- CSS 基础点集锦一:盒子模型、浮动、清除浮动
- css学习记录2-盒子模型-浮动
- CSS笔记(盒子模型与浮动)
- css 定位模型和浮动总结
- css盒子模型与div浮动详解
- CSS浮动与盒模型知识点
- css中的盒子模型及其浮动
- CSS基础(二)--盒模型与浮动
- CSS之盒子模型的浮动
- MATLAB 图片浏览(简易版)
- Android API Guides---Creating a Search Interface
- idea配置
- C++继承
- UVALive 6838 Flipping Parentheses(线段树、单点更新、区间查询)
- css浮动模型初理解
- ScrollView嵌套ListView
- View的事件体系---V3.3 弹性滑动
- 指令与动作
- 项目2——友元类
- HDOJ 2196 Computer
- css层模型初理解
- 自动加载
- 一张照片让你的安卓手机崩溃