大家好今天我们来聊聊float这玩意儿！你们知道吗，它不仅能把字围着图转，还可以搞出好看的多栏排版那么float到底有啥厉害之处？快来跟我一起揭开它的神秘面纱！
文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容
哈喽，给大家讲个事儿，你们知不知道Float是怎么让文字绕着图片转的吗？其实，有些时候，咱们想要在文章里加张图片，可又怕影响层次感，这时候Float就能派上大用场了。它能让文字自然而然地绕着图片打转，感觉好炫酷这样一来，咱们就可以随意插入文章中的图片！
P {margin: 0; border: solid 1px;}
img {float: left;}
别小看了Float，它不仅能让你的文字围绕图片转，还可以轻松搞掂多栏布局！做网页设计时，把信息分成几块儿看起来会更清楚？幸运的是，只要加入一个简单的浮动属性，就可以顺利完成多栏布局，让整张页面井井有条。
P {margin: 0; border: solid 1px; width: 200px; float: left;}
img {float: left;}
哈喽，咱们聊聊那个float的事儿。当元素浮动以后，好像就和文档流无关了？没错，关系没了，子元素看似牛逼哄哄的高起来，可爹地还卧在原地不动。那咋整？别慌，哥们儿这儿有三个妙招，你看着办呗！
这是段落这是段落这是段落这是段落这是段落这是段落这是段落
首先你试试给父元素加上 overflow: hidden 这个属性呗。即使遇到大图片或奇奇怪怪的东西，父元素也不怕被挤爆。因为它会把这些东西死死地捂住。但记住，这个功能还有个奇妙之处，就是可以捕捉那些爱捣蛋的浮动对象。不过注意了如果父元素被用到顶部下拉菜单那儿，那可能就看不到小脑袋瓜了。
section , footer {border: solid 1px;}
img {float: left;}
再有个办法，就是让你爸那个元素挪到中间去，浏览器整个屏幕宽度（大概100%吧）都要包住他。然后别忘记给那footer加个消除浮动的操作，否则他就可能跑到section边上去了。还有，千万注意，咱们这个方法不能用到那种随边缘自动对齐的元素上，否则他们可能挤到一起不对称咯！
告诉你个省事儿的招儿，就是加一个叫“伪元素”的小伙伴。比如碰上那种没爹疼爱的标签Img和P混战在一块儿，想消肿的话，这大招儿特管用！只要你选中想要弄得部分，右击去找找菜单里有没有”伪元素”这项，然后画个勾，完事儿~
是不是感觉FLOAT就像是神奇魔法师呀？不仅可以让文字贴紧图片，还能帮忙做出超美的多栏网页，真是太厉害了！但用的过程中要小心，别让父元素遮挡住了漂浮层。希望通过了解这篇文章，对你们的学习或者工作有所帮助！如果遇到啥问题，欢迎在评论里和我分享！最后别忘了给咱们点个赞，分享下你们的用法体验今天咱们就来聊聊LOAT的奇妙应用以及避开它的陷阱！FLOAT除了能实现图片围着文字转的效果，更能帮我们搞定多栏布局。不过千万要注意，别让父元素把漂浮层给盖住了。我希望大家能够学到实用的技巧，觉得有用的话就赶紧给我们点赞并分享！一起期待在评论区展开热烈讨论！
section {border: solid 1px; float: left; width:100%}
footer {border: solid 1px; clear: left}
img {float: left;}
评论0