总结:
1)html有很多默认样式,然而实际应用中并不需要,因此要在制作样式之前清除掉默认样式。
2)注意清除margin-top塌陷
3)使用float:left后要使用clear:both清除其影响
4)注意要兼容IE
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片列表布局</title> <style type="text/css"> body,ul,h3{ /*清除默认格式中的margin 和 padding*/ margin:0; padding:0; } ul{ /*清除ul默认格式中的.*/ list-style: none; } /*清除margin-top塌陷*/ .clearfix:before,.clearfix:after{ content:""; display:table; } /*清除浮动*/ .clearfix:after{ clear:both; }