<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动布局</title> <style type="text/css"> /*第一种清楚浮动的方法，父元素上设置overflow:hidden;*/ /*ul{ overflow: hidden; }*/ /*第二种清楚浮动的方法，在父元素上设置伪类 这是最好的清楚浮动方法*/ /*ul:after{ content: ""; display: block; clear: both; }*/ /*第三种清楚浮动的方法，写一个空的元素，设置样式为clear:both;*/ /*.clear{ clear: both; }*/ ul li{ float: right;/*元素向左浮动*/ list-style: none;/*去掉li前面的小圆点*/ margin-right: 20px; } </style> </head> <body> <ul> <li>新闻列表1</li> <li>新闻列表2</li> <li>新闻列表3</li> <div class="clear"></div> </ul> <div>我并没有设置浮动，我是块级元素我要自己一行我并没有设置浮动，我是块级元素我要自己一行我并没有设置浮动，我是块级元素我要自己一行我并没有设置浮动，我是块级元素我要自己一行我并没有设置浮动，我是块级元素我要自己一行我并没有设置浮动，我是块级元素我要自己一行我并没有设置浮动，我是块级元素我要自己一行我并没有设置浮动，我是块级元素我要自己一行我并没有设置浮动，我是块级元素我要自己一行</div> </body> </html>