CSS 浮动篇

最新推荐文章于 2020-07-05 22:50:03 发布

believealone

最新推荐文章于 2020-07-05 22:50:03 发布

阅读量115

点赞数

分类专栏： HTML+ CSS 学习笔记

本文链接：https://blog.csdn.net/believealone/article/details/106872511

版权

19 篇文章 1 订阅

订阅专栏

1. 浮动(float)的值有两个: 左浮动(left)和右浮动(right);

2. 设置了浮动的元素, 其默认大小由内容撑出;

3. 设置了浮动的元素, 可以设置宽高

4. 设置了浮动的元素, 水平浮动, 直到遇到另外一个浮动元素或者父级的边框停止.

5. 设置了浮动的元素, 脱离文档流, 层级提升, 失去自己原有的位置. 会影响到其后面的元素,但不影响其前面的元素. 但是如果后面的元素里有文字或者图片, 文字和图片不受印象.

6. 设置了浮动的元素, margin的auto值失效. 浮动的优先级大于margin:auto

清除浮动流

浮动的元素脱离文档流, 失去了自己之前的位置, 其后面的兄弟元素会占据浮动元素之前的位置. 导致浮动元素覆盖在其后面的兄弟元素上面. 对布局造成影响

解决办法:

我们需要清除浮动造成的影响(注意, 只是清除浮动造成的影响, 元素该浮动还是要浮动的)

通过给受到浮动影响的元素添加clear样式解决浮动造成的问题

注意: clear样式是添加给受到浮动影响的元素, 不是添加给浮动的元素

clear:

1. left 清除左浮动造成的影响

2. right 清除右浮动造成的影响

3. both 清除左右浮动造成的影响
与父级有嵌套的浮动流

如果元素发生了嵌套. 父元素不设置高度,那么父元素的高度由其内部的内容撑出, 如果子元素浮动(脱离文档流, 层级提升), 那么子元素无法再去撑起父级的高度. 此时, 父级的高度就会变小. 甚至为0(当子元素全部浮动时) ----- 父级塌陷

解决办法:

1. 人为给父级设置高度

2. 给所有浮动元素的后面添加一个空元素, 并给空元素设置clear:both

3.常用给父级添加overflow:hidden;

养成书写习惯: 以后只要给元素设置浮动,设置完之后, 立刻去找元素的父级, 给父级添加overflow:hidden;

-->

关注

专栏目录