Home > Article > Web Front-end > CSS的疑惑_html/css_WEB-ITnose
CSS的疑惑_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:45:391070browse
如下代码，A,B,C,D四个DIV，最后一个DIV为啥文字内容会分离，DIV D的边框会移动到第一行？
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>CSS</title></head><style type="text/css"> .A, .B, .C { float: left; width: 200px; height: 100px; margin: 1em; border-style: solid; border-width: 1px; border-color: #ccc; } .D { width: 200px; height: 100px; margin: 1em; border-style: solid; border-width: 1px; border-color: #A94E38; }</style><body><div class="A">Text in div A</div><div class="B">Text in div B</div><div class="C">Text in div C</div><div class="D">Text in div D</div></body></html> 运行效果
请求解惑，谢谢。
回复讨论(解决方案)
你这个是因为浮动元素对为未浮动元素（标准文档流）产生了影响，使用clear即可。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head> <style type="text/css"> .A, .B, .C { float: left; width: 100px; height: 100px; border: solid 2px blue; background-color: green; } .D { width: 200px; height: 200px; background-color: red; } /* 清除浮动元素对当前元素的影响 */ .clear { clear: both; }</style> <body><div class="A">Text in div A</div><div class="B">Text in div B</div><div class="C">Text in div C</div> <div class="D clear">Text in div D</div> </body></html> 谢谢，根据你的提示，找了篇博文，
http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.html
正在努力理解中
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS3的transform属性_html/css_WEB-ITnoseNext article：8.用户模块：跳转到登录页面_html/css_WEB-ITnose