<!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>
浙公网安备 33010602011771号