<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css布局</title> <!-- 一、最基础的是流动布局，就是从上到下--> <!-- 二、浮动--> <!--特点:--> <!--1、会脱离文档流--> <!--但是不会脱离文字流(脱离文档流就是不占着文档流的位置，--> <!--不脱离文字流就是还占着文字的位置，--> <!--这和float最初的目的相关，最初就 是做图文混排的) --> <!--2、浮动元素的宽高是由内容撑开， 不管是行级还是块级元素--> <!--如果设置了浮动属性，该元素就变成了具有inline- block属性的元素--> <!--(设置的宽高就可以生效了)--> <!--Q--> <!--3、如果浮动元素上边是一个没有浮动的块元素，|--> <!--则浮动元素不会超过这个块元素(像一堵墙)--> <!--4、多个元素设置浮动， 宽度足够的话， 会排在一行--> <!--5、文字环绕图片的效果--> <style> .box1{ background-color:pink; height:100px; width:100px; float:right; } .box2{ width:300px; border:5px solid yellow; /*清除浮动影响*/ /*clear:both;*/ /*float:left;*/ } .box3{ background-color:red; height:50px; width:100px; float:right; /*就是因为子容器内设置了浮动，这样的话脱离了基本的流动布局*/ } .box4{ clear:both; } .clearfix:after{ content:''; display:block; clear:both; } </style> </head> <body> <div class="box1"> <div>Everything</div> </div> <!--解决父容器高度坍塌的问题，加一个无意义的div框，设置clear，扩展高度，防止坍塌--> <div class="box2"> <div class="box3"> <p>Nothing</p> </div> <div class="box4"></div> </div> <!--第二种方法，设置clearfix选择器--> <div class="box2 clearfix"> <div class="box3"> <p>Nothing</p> </div> </div> </body> </html>