Rumah >hujung hadapan web >html tutorial >CSS的疑惑_html/css_WEB-ITnose
CSS的疑惑_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:45:391129semak imbas
如下代码，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
正在努力理解中
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：CSS3的transform属性_html/css_WEB-ITnoseArtikel seterusnya：8.用户模块：跳转到登录页面_html/css_WEB-ITnose