In the following code, there are four DIVs A, B, C, and D. Why is the text content of the last DIV separated and the border of DIV D moved to the first line?
<!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>
You are doing this because floating elements have an impact on unfloated elements (standard document flow). Just use 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> Thanks, I found a blog post based on your tips,
http://www.cnblogs.com/polk6/archive/ 2013/07/25/3142187.html
Still trying to understand
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
