css浮动模型float问题
float模型属性
- left:向左浮动
- right:向右浮动
float模型需要注意的几点
- 块级元素和行内元素（行内元素不可指定宽高）都可以浮动，当一个行内元素浮动以后将会自动变为一 个块级元素，即便设置display:inline以后其仍然是个块元素
- 当一个元素浮动以后，其下方的元素会上移。元素中的内容将会围绕 在元素的附近。
- 元素浮动以后即完全脱离文档流，不再在文档中在占用位置。也不会再影响父元素的高度，也就是浮动元素不会撑开父元素。这是因为浮动流所产生的，下面我们来探讨如何处理浮动流问题。
清理浮动流的方法
清理浮动流的方法很多。推荐文章
但是在实际开发中一般都会写一个.clearfix的css选择器,而后使用:after伪元从来清理浮动流，父级元素使用clearfix这个选择器。看下面的代码和演示。
<html lang="en"> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0px; padding: 0px; } /* 利用父级元素伪元从来清理浮动流，可以处理父级元素未设置高float影响四周和塌陷问题 */ .clearfix::after{ content: " "; height: 0px; visibility: hidden; display: block; clear: both; } /* 上面就是利用伪元素清理浮动流的代码 */ .wrapper{ width: 400px; border: 1px solid black; } .content1{ height: 100px; width: 100px; background-color: red; float: left; } .content2{ height: 100px; width: 100px; background-color: green; float: left; } .content3{ height: 100px; width: 100px; background-color: blue; float: left; } </style> </head> <body> <div class="wrapper clearfix"> <div class="content1"></div> <div class="content2"></div> <div class="content3"></div> </div> </body></html>说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » css浮动模型float问题
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » css浮动模型float问题
