Web网页开发-浮动-笔记

2024-01-03 16:22:48

(1)使用浮动
设置元素同处一行,并且中间没有空隙

特性:

  1. 浮:设置浮动的盒子会在原地漂浮,向左向右,不占据原来的位置
  2. 漏:前面的盒子设置浮动之后,位置不再占据,后面的元素会自动补位
  3. 特:设置了浮动的元素会自动转换成行内块

浮动的元素不能超出父盒子的边框和内边距

(2)兄弟盒子?

如果第一个盒子浮动,后面的盒子会自动补位
如果第二个盒子浮动,第一个盒子不动,那么浮动的元素只能在第一个盒子的后面左右移动
如果两个盒子都浮动,那么两个盒子会同处一行

(3)浮动注意事项

  1. 浮动只能影响它本身以及后面的元素,不影响标准流的元素。
  2. 块级元素默认宽度整一行,高度由内容撑开,如果子盒子浮动,将无法撑开父盒子

(4)清除浮动带来的影响:让父盒子的高度不为0
解决方法:
1.给父盒子设置高度
2.给父盒子设置overflow:hidden,可以让父盒子强制获取内容的高度,无论内容是否浮动
3.额外标签法:给父盒子后面的标签设置clear:both[清除浮动];让后面的元素不会自动补位
4.after伪元素:?
.fu:after { ?content: ""; display: block; height: 0; clear: both; visibility: hidden; ?} ??
.fu {*zoom: 1;} ?

文章来源:https://blog.csdn.net/pinbodeshaonian/article/details/135362537
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。