浮动最直接的价值就在于他可以多个div并排在同一行。
当然也可以设置盒子的样式为 inline-block， 但是带来的问题也随之而来，首先就是盒子之间右空隙，其次，盒子会依次从左到右并排，虽然可以通过padding控制他们之间的间距，但是变数太大了
浮动会让盒子脱离标准流，盒子不再占用位置。浮动的盒子总是会找到离他最近的父元素进行对齐，但是不会超出内边距的范围。浮动的盒子不能越过父盒子的padding值常见的布局如下图，每一个图片都在一个div中，为了让他们可以并排在一行上，肯定就得添加浮动，同时浮动会影响其他标准流，所在在这些标记浮动的元素的最外层添加一个div，清除这些盒子的浮动。同时给最外层的盒子添加高，让他占位。这样再往下的标准流就不会再受到影响了。
尝试浮动让多个div并排在同一列，给下面的两个div同时添加浮动即刻
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> .dv1 { wIDth: 200px; height: 200px; background-color: pink; float: left; } .dv2 { wIDth: 300px; height: 300px; background-color: aqua; float: left; } </style></head><body><div ></div><div ></div></body></HTML>浮动仅仅会影响他下面的元素，看下面的例子
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> .dv1 { wIDth: 200px; height: 200px; background-color: pink; } .dv2 { wIDth: 300px; height: 300px; background-color: aqua; float: left; } </style></head><body><div ></div><div ></div></body></HTML>最终的效果就像下面这样,虽然水蓝色的盒子添加了浮动，但是这也是仅仅是会影响他之后的元素，而他上面的元素不会受到影响。
推断，父盒子中有多个子盒子，如果其中一个盒子存在浮动，那么其他的所有盒子都需要浮动。才能在一行内并排
浮动隐藏的模式转换浮动可以让盒子隐式的转换成行内块元素。
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> .dv1 { background-color: aqua; float: left; } </style></head><body><div >123</div></body></HTML>效果：
布局和版心示例1：
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> * { margin: 0; padding: 0; } .top,.footer,.main,.banner{ background-color: #eee; wIDth: 1190px; } .top { height: 80px; margin: 0 auto 5px; } .banner { height: 200px; margin: 0 auto 5px; } .main { height: 600px; margin: 0 auto 5px; } .footer { height: 80px; margin: 0 auto; } </style></head><body><div >123</div><div >123</div><div >123</div><div >123</div></body></HTML>效果图：
示例2:
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> * { margin: 0; padding: 0; } .top,.banner{ background-color: #eee; wIDth: 1190px; } .top { height: 80px; margin: 0 auto 5px; } .banner { height: 200px; margin: 0 auto 5px; } .main { height: 600px; margin: 0 auto 5px; } .left { background-color: pink; height: 600px; wIDth: 300px; float: left; } .right { background-color: aqua; height: 600px; wIDth: 890px; float: right; } .footer { height: 80px; margin: 0 auto; } </style></head><body><div >123</div><div >123</div><div > <div ></div> <div ></div></div><div >123</div></body></HTML>注意点，比如main部分，父盒子的宽度是1190px， 里面的两个子盒子发生浮动实现了并排，这时如果子盒子的宽度相加大于父盒子的宽度，最终的效果就是右边的子盒子会被挤下去。 为了防止他们不被挤下去，就得修改相应的子盒子的宽度
此外，像这种布局方式，我们用鼠标推动着浏览器往左滑动，盒子是不会被挤下去的。
效果：
清除浮动清除浮动的本质： 就是为了解决父级元素因为子集元素浮动后而导致高度为0的情况。
看下面的例子：
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> * { margin: 0; padding: 0; } .main { wIDth: 1190px; background-color: #eee; margin: 0 auto 5px; } .left { background-color: pink; height: 600px; wIDth: 300px; float: left; } .right { background-color: aqua; height: 600px; wIDth: 890px; float: right; } .footer { wIDth: 100%; height: 80px; margin: 0 auto; background-color: #cccccc; } </style></head><body><nav></nav><div > <div ></div> <div ></div></div><div >123</div></body></HTML>因为我们并没有给main盒子设置高度，导致让它里面的子盒子发生发动脱离文档流后，没有人撑开它，他就重新变成了一条线
前面的解决方式是我们给main盒子设置一个固定的高度，但是很多情况下，我们的需求是根据子盒子的本身的高度去撑开盒子，而不是把高度写死，于是我们可以使用清除浮动。
清除浮动实现的最终效果就是：父盒子中子盒子并排，父盒子的高度 = 最高的子盒子的高度
清除浮动方式1：w3c推荐的方式，在存在浮动的元素后面添加一个新的空标签，如下：
<body><div > <div ></div> <div ></div></div><!-就像下面这样--><div ></div><div >123</div></body>第二种方式清除浮动，可以通过给父盒子添加属性 overflow
.main { wIDth: 1190px; background-color: #eee; margin: 0 auto 5px; /*同样可以实现清除浮动*/ overflow: hIDden;}元素的定位属性主要是包含两部分： 定位模式 + 边偏移
边偏移| 边偏移属性 | 描述 |
|---|---|
| top | 顶部偏移量：定义元素相对于其父元素上边距的距离 |
| bottom | 底部偏移量：定义元素相对于其父元素下边距的距离 |
| left | 左侧偏移量 |
| right | 右侧偏移量 |
CSS中，通过position属性定义元素的定位模式，基本的语法如下
| 值 | 描述 |
|---|---|
| static | 默认值，自动定位。 |
| relative | 相对定位，相对于其文档流的位置进行定位。 |
| absolute | 绝对定位，相对于其上一个元素的父元素进行定位。 |
| fixed | 固定定位，相对于浏览器的窗口进行定位。 |
网页中的元素默认的都是静态定位，比如一个div默认会自己独占一行，多个span可以并排在一行。
静态定位的唯一的作用就是取消其他的定位模式。
相对定位相对定位：相对于自己当前的位置，再定位到新的位置上。
看下面的示例：
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> * { margin: 0; padding: 0; } .dv { margin: 100px; background-color: aqua; wIDth: 100px; height: 100px; position: relative; top: 100px; } </style></head><body><div ></div></body></HTML>最终的效果就是会相对于自己的位置重新定位，在top方向上增加100px
在看下面的示例： 可以看到，使用相对定位，元素虽然会移动，但是元素的原来在标准流中所占的位置不会发生改变。
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> * { margin: 0; padding: 0; } .dv1 { background-color: aqua; wIDth: 100px; height: 100px; position: relative; top: 50px; left: 50px; } .dv2 { background-color: skyblue; wIDth: 100px; height: 100px; } </style></head><body><div ></div><div ></div></body></HTML>效果图：
绝对定位如下例子：
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> * { margin: 0; padding: 0; } .dv1 { background-color: aqua; wIDth: 100px; height: 100px; position: absolute; } .dv2 { background-color: skyblue; wIDth: 120px; height: 120px; } </style></head><body><div ></div><div ></div></body></HTML>效果图：
给水蓝色的盒子设置定位方式：相对定位，他相对于自己的父元素进行定位，在上面的例子中，就是相对于body，也就是当前的屏幕进行定位。
再看下面这个例子：
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> * { margin: 0; padding: 0; } .dv1 { margin: 50px; background-color: aqua; wIDth: 100px; height: 100px; } .dv2 { background-color: skyblue; position: absolute; top: 20px; left: 20px; wIDth: 80px; height: 80px; } </style></head><body><div > <div > </div></div></body></HTML>效果图：
通过这个例子看到，当给子盒子添加相对定位时，如果他的直接父盒子并没有添加任何定位，这时子盒子实际上是会相对于body进行定位。
子绝父相子绝父相说的是啥意思呢？意思就是说，如果我们想实现子元素相对于父元素进行定位时，子元素的定位方式需要设置成绝对定位，父元素的定位方式设置成相对定位才ok
还是上面的例子：像下面这样修改CSS样式：
<style> * { margin: 0; padding: 0; } .dv1 { margin: 50px; background-color: aqua; wIDth: 100px; height: 100px; position: absolute; } .dv2 { background-color: skyblue; position: relative; top: 10px; left: 10px; wIDth: 80px; height: 80px; } </style>最终实现的效果就是：
加了定位的盒子水平对齐首先来说，一个盒子只要是添加了定位，盒子就会飘起来，与此同时margin属性也会失效。
那怎么使一个添加了定位的盒子水平对齐呢？ 如下:
.dv1 { background-color: aqua; wIDth: 100px; height: 100px; /*无论什么定位都ok*/ position: absolute; /*以左上角为基准，移动到父盒子的百分之五十宽度的位置*/ left: 50%; /*margin值，往左减少50px*/ margin-left: -50px; }CSS中与显示和隐藏相关的常见属性有如下几个
display
visiblity
overflow
我们的目的是让其在文档中消失，而不是在源码中将其删除。
通过display隐藏元素后，元素原来的位置不再保留div { /*隐藏之后，不再保留原位置*/ display: none;}div { /*将元素转换成块级元素，第二层意思就是显示元素*/ display: block;}通过visibility控制元素的隐藏，原位置将会被保留
div { /*对象可见*/ visibility: visible; }div { /*对象隐藏*/ visibility: hIDden; }通过overflow控制
div { /*超出的部分依然会显示*/ overflow: visible;}div { /*超出的部分隐藏*/ overflow: hIDden;}div { /*内容超出后，会显示滚动条*/ overflow： auto；}div { /*总是显示滚动条*/ overflow： scroll；} 以上是内存溢出为你收集整理的Html 基础 三全部内容，希望文章能够帮你解决Html 基础 三所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）