浮动和定位

原创于 2024-06-24 22:19:44 发布 · 1.8k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

1.清除浮动

1.1 为什么要清除浮动

在网页，由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。准确地说，并不是清除浮动，而是清除浮动后造成的影响。

1.2 清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。

1.3清除浮动的方法

如果要避免浮动对其他元素的影响，就需要清除浮动。在css中，使用clear属性清除浮动，其基本语法格式如下：

选择器{clear：属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

<style>

.father{

width: 200px;

border: 1px solid red;

/* 1.当子元素浮动时,设置父元素的高 */

/* float: left; */

height: 300px;

}

.son{

width: 100px;

height: 100px;

/* 浮动的影响:造成了父元素高度为0的问题 */

float: left;

background-color: blue;

}

.father_bro{

width: 300px;

height: 200px;

background-color: pink;

}

</style>

</head>

<body>

<div class="father clearfix">

<div class="son"> </div>



</div>

<div class="father_bro"></div>

</body>

</html>

1.3.1 额外标签法

通过在浮动元素末尾添加一个空的标签例如 <div style="clear:both"></div>

优点：通俗易懂，书写方便。

缺点：添加许多无意义的标签，结构化较差。

1.3.2 父级添加overflow属性方法

可以给父级添加： overflow为hidden|auto|scroll 都可以实现,只要不是visible

优点：代码简洁

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

1.3.3 使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了

使用方法：

.father{

width: 200px;

border: 1px solid red;

/* 1.当子元素浮动时,设置父元素的高 */

/* float: left;

height: 300px; */

}

.son{

width: 100px;

height: 100px;

/* 浮动的影响:造成了父元素高度为0的问题 */

float: left;

background-color: blue;

}

.father_bro{

width: 300px;

height: 200px;

background-color: pink;

}

/* 开发中解决清除浮动的影响 */

/* code hate cv */

.clearfix::after{

content: '.';

clear: both;

display: block;

height: 0;

/* 隐藏 */

/* 虽然隐藏但仍占位 */

visibility: hidden;

}

/*如果子元素都浮动了,父元素没有设置高度,产生了浮动的影响,可以使

用伪元素的方法来解决清除浮动 */

1.3.4 清除浮动总结

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加许多无意义的标签，结构化较差。
父级overflow:hidden/auto/scroll;	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题

2. 定位(position)

如果说浮动，关键在一个 “浮” 字上面，那么,定位关键在于一个 “位” 上。

2.1 元素的定位属性

1.定义模式

在css中，position属性用于定义元素的的定位模式，其基本语法格式如下：

选择器{ position:属性值；}

position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位
sticky	粘性定位，基于用户的滚动位置来定位。

2.边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

2.2相对定位（relative）

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

<style>

.father{

width: 400px;

height: 300px;

border: 1px solid red;

margin: 50px auto;

}

.father div{

width: 100px;

height: 100px;

}

.father .son1{

background-color:blue;

}

.father .son2{

background-color:green;

/* 相对定位:相对于自己原来的位置进行定位

没有脱离标准流*/

position: relative;

left: 50px;

top: 50px;

}

.father .son3{

background-color:pink;

}

</style>

</head>

<body>

<div class="father">

<div class="son1">son1</div>

<div class="son2">son2</div>

<div class="son3">son3</div>

</div>

</body>

</html>

注意：

相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）

如果说浮动的主要目的是让多个块级元素一行显示，那么定位的主要价值就是移动位置，让盒子到我们想要的位置上去。

2.3绝对定位（ absolute）

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，不占位置。

.father .son2 {

background-color: green;

/* 绝对定位 */

/* 1.父元素如果没有设置定位,那么相对于body(文档进行定位) */

/* 2.脱离标准流脱标 */

position: absolute;

left: 100px;

top: 80px;

}

2.4 固定定位（fixed）

/* 固定定位：相对于浏览器进行定位 */

img{

position: fixed;

right: 50px;

bottom: 10px;

}

固定定位有两点：

固定定位的元素跟父亲没有任何关系，只认浏览器。
固定定位完全脱标，不占有位置，不随着滚动条滚动。

2.5子绝父相

子绝父相就是指子元素设置绝对定位，而父元素设置相对定位。

因为子级是绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方。

父盒子布局时，需要占有位置，因此父亲只能是相对定位.

这就是子绝父相的由来。

.father {

width: 400px;

height: 300px;

border: 1px solid red;

margin: 50px auto;

position: relative;

}

.father div {

width: 100px;

height: 100px;

}

.father .son2 {

background-color: green;

/* 绝对定位 */

/* 2.父元素设置定位,那么父元素进行定位*/

position: absolute;

left: 100px;

top: 80px;

}

2.6绝对定位的盒子水平/垂直居中

.father{

width: 300px;

height: 250px;

border: 1px solid red;

margin: 100px auto;

/* 子绝父相 */

position: relative;

}

.son{

width: 100px;

height: 100px;

background-color: chartreuse;

/* 子绝父相 */

position: absolute;

left: 50%;

top: 50%;

/* 往上移左移自己的一半 */

margin-left: -50px;

margin-top: -50px;

}