首页 > 试题广场 >

解释下浮动和它的工作原理？清除浮动的技巧？

[问答题]
解释下浮动和它的工作原理？清除浮动的技巧？
添加回答
goldencurry头像 goldencurry
清除浮动的方法比较多，主要有三种思路。目的是清除浮动带来的影响-父元素的高度塌陷，第一给父元素设置定高 height值 第二利用clear或者clearfix 第三是想办法使父元素具有包裹性，可以使用overflow position float实现
发表于 2017-08-31 09:17:47 回复(0)
crimsonSmash头像 crimsonSmash
浮动是用来做网页布局的, 主要用在块级元素的横向布局上.
1.浮动的值只有左浮动(left)和右浮动(right)
2.设置了浮动的元素,大小与元素的大小由内容撑出.
3.设置了浮动的元素可以设置宽高.
4.设置了浮动的元素,水平浮动,直到遇到父级的边框或者另外一个浮动元素停止浮动.
5.设置了浮动的元素,脱离文档流,会影响到它后面的元素.(如果后面元素里有图片或者文字,图片或者文字不受影响)
6.设置了浮动的元素,自动margin失效.
 <!-- 浮动的元素会影响到它后面的元素,我们需要清除浮动造成的影响.clear样式可以帮助我们清除浮动造成的影响 
     clear:
     1.left
     2.right
     3.both
     *** clear样式,谁受影响加给谁!!! -->

当父级没有设置高度时,其高度由它里面的内容撑出.此时如果父级里的元素浮动,此时父级会发生"内容塌陷".

    解决办法:

    1.人为设置父级高度.

    2.在浮动元素的最后添加一个空标签,并设置clear:both解决;

    3.给父级添加overflow:hidden样式解决

发表于 2017-08-31 22:23:25 回复(1)
努力赚钱的小曾头像 努力赚钱的小曾

<p>脱离文档流，占据空间，碰到边框停止</p><p>清楚浮动，空标签</p><p>overflow</p><p>clear</p><p>border</p>伪类

编辑于 2020-08-29 13:50:40 回复(0)
名字被占用的Aimee头像 名字被占用的Aimee
浮动元素脱离文档流，不占据空间，当遇到父容器的边框或者浮动元素的边框停靠 解决办法:在浮动元素最后面加一个空的div 使用clear:both 给浮动元素的父容器添加overflow:auto
编辑于 2020-03-10 12:17:52 回复(0)
藤景树头像 藤景树

1.给父级元素添加一个新的空元素，并设置css为clear:both.

2.对浮动的盒子父级元素添加overflow:hidden

3.使用伪元素标签法，谁出问题给谁添加.clearfix

发表于 2019-09-11 11:15:09 回复(0)
提交观点

问题信息

上传者：牛妹
难度：
5条回答 5004浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号