标签：hid 清除 文档 没有 oat foo code 定位 type
一、清除浮动
为什么要清除浮动：父盒子不适合设定高度，子盒子浮动后不占位，导致父盒子高度为0，父盒子外的其它元素上移占位导致布局错乱
方法：1. 额外标签法、2. overflow清除浮动、3. after伪元素清除浮动、4. 双伪元素清除浮动
1. 额外标签法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father { width: 500px; border: 1px solid red; } .big { width: 100px; height: 100px; background-color: pink; float: left; } .small { width: 80px; height: 80px; background-color: blue; float: left; } .footer { width: 150px; height: 50px; background-color: gray; } .clear { /*如果清除了浮动， 父亲去自动检测孩子的高度 以最高的为准*/ /*清除浮动 left | right | both*/ clear: both; } </style> </head> <body> <div class="father"> <div class="big"></div> <div class="small"></div> <!-- 1. 清除浮动-额外标签法：最后一个浮动标签的后，新添加一个标签清除浮动 --> <div class="clear"></div> </div> <div class="footer"></div> </body> </html>
2. overflow清除浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father { width: 500px; border: 1px solid red; /*注：是给父盒子添加overflow；不是所有的浮动我们都需要清除 ，谁影响布局，我们清除谁就行了*/ overflow: hidden; } .big { width: 100px; height: 100px; background-color: pink; float: left; } .small { width: 80px; height: 80px; background-color: blue; float: left; } .footer { width: 150px; height: 50px; background-color: gray; } </style> </head> <body> <div class="father"> <div class="big"></div> <div class="small"></div> </div> <div class="footer"></div> </body> </html>
3. after 伪元素清除浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*3. 伪元素清除浮动：父级div定义伪类after和zoom*/ .clearfix:after { /*正常浏览器 清除浮动*/ content:""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *zoom: 1; /*zoom 1 就是ie6 清除浮动方式 * ie7一下的版本所识别*/ } .father { width: 500px; border: 1px solid red; } .big { width: 100px; height: 100px; background-color: pink; float: left; } .small { width: 80px; height: 80px; background-color: blue; float: left; } .footer { width: 150px; height: 50px; background-color: gray; } </style> </head> <body> <div class="father clearfix"> <div class="big"></div> <div class="small"></div> </div> <div class="footer"></div> </body> </html>
4. 双伪元素清除浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*4. 双伪元素清除浮动*/ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .father { width: 500px; border: 1px solid red; } .big { width: 100px; height: 100px; background-color: pink; float: left; } .small { width: 80px; height: 80px; background-color: blue; float: left; } .footer { width: 150px; height: 50px; background-color: gray; } </style> </head> <body> <div class="father clearfix"> <div class="big"></div> <div class="small"></div> </div> <div class="footer"></div> </body> </html>
二、定位
元素的定位属性主要包括定位模式和边偏移两部分。
1. 边偏移
top：顶端偏移量，定义元素相对于其父元素上边线的距离；
bottom：底部偏移量，定义元素相对于其父元素下边线的距离；
left：左侧偏移量，定义元素相对于其父元素左边线的距离；
right：右侧偏移量，定义元素相对于其父元素右边线的距离；
即定位需要和边偏移搭配使用，如 top:100px; left:30px;
2. 定位模式（定位的分类）
在CSS中，position属性用于定义元素的定位模式，基本语法格式如下：
选择器{ position: 属性值;}
常用属性值：static（自动定位，默认）、relative（相对定位，相对于其原文档流的位置进行定位）、absolute（绝对定位，相对于其上一个已经定位的父元素进行定位）、fixed（固定定位，相对于浏览器窗口进行定位）
（1）相对定位
子级用绝对定位，父级元素用相对定位。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; } .top { /*相对定位*/ position: relative; top: 100px; left: 100px; } .bottom { background-color: gray; } </style> </head> <body> <div class="top"></div> <div class="bottom"></div> </body> </html>
（2）绝对定位
若所有父元素都没有定位，以浏览器当前屏幕为准对齐；若父元素有定位，则依据最近的已经定位的父元素/祖先进行定位。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { height: 2000px; } div { width: 200px; height: 200px; background-color: pink; } .top { position: absolute; /*绝对定位：不占位置 跟浮动一样*/ top: 0px; left: 0px; } .bottom { background-color: gray; width: 110px; } </style> </head> <body> <div class="top"></div> <div class="bottom"></div> </body> </html>
标签：hid 清除 文档 没有 oat foo code 定位 type
原文地址：https://www.cnblogs.com/sharef/p/10456420.html
