1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 浮动 高度塌陷 清除浮动

浮动 高度塌陷 清除浮动

时间:2023-02-03 18:48:16

相关推荐

浮动 高度塌陷 清除浮动

一、浮动

标准文档流:网页最底层:在标准文档流里面所有的元素按照元素的性质排列

浮动:css布局的方法,可以设置向左或向右浮动

特点:①脱离标准文档流

②所有浮动元素一行排列,可以设置宽高

③如果浮动元素上面有标准文档流中的块元素,浮动不能上移

④浮动元素从最左边或者最右边开始排列

⑤浮动元素会覆盖标准文档流的元素,除了文本内容

二、高度塌陷

浮动会产生高度塌陷,指包含块没有设置宽高时,这是高度应该由内容撑开,但设置了浮动会脱离标准文档流,这是的高度为0

解决方法:

①给包含块设置高。 可能导致父元素高度不合适

②给父元素设置浮动。使父元素脱离标准文档流,但会影响后面元素的布局

③给父元素设置overflow。此时overflow的值不是visible,通常为hidden

④给父元素设置绝对定位(position)

⑤在父元素后面设置一个块元素,块元素在标准文档流,清除两边的浮动

⑥给父元素通过一个伪元素选择器,添加一个块元素或table,添加的元素要在标准文档流中,清除两边的浮动

三、清除浮动

clear-left:清除元素左侧浮动元素对其的影响

clear-right:清除元素右侧浮动元素对其的影响

clear-both:清除元素两边浮动元素对齐影响最大的一侧

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。