CSS——float浮动属性

float浮动

.div1{
            width: 100px;
            height: 100px;
            background: red;
			float: left;
        }
        .div2{
            width: 300px;
            height: 300px;
            background: blue;
			float: right;
        }
        .div3{
            width: 100px;
            height: 100px;
            background: green;
			float: inherit;
        }
        /*设置float会自动变为块状元素，会占用文档流，但会被div包裹*/
    
    <div class="div1"></div>
	<div class="div2">
		<div class="div3"></div>
	</div>
           

clear清除浮动副作用

.div1{
			width: 100px;
			height: 100px;
			background: red;
			float: left;
		}
		.div2{
			width: 120px;
			height: 120px;
			background: blue;
			/*如何解决占据div的方法，只需要添加clear:left属性，属性的意义是不允许左边有左浮动,right同理,both是都不允许*/
			clear: left;
			/*或者使用overflow标签，来处理子元素撑破父元素的情况，意义是使修剪溢出元素，使子元素严格在父元素内*/
			/*zoom标签也可以使用，一般作用在IE浏览器，两个标签一起使用可以适配所有浏览器
			zomm:1;标签的作用就是让父元素完美接纳子元素，让其随子元素大小变化*/
			/*还有一种方法是给父元素也添加float属性，就不怕塌陷了，然后再给下面的元素添加clear清除*/
		}	
		.div3{
			width: 200px;
			height: 400px;
			border: 1px solid #ccc;
		}
		
	<div class="div3">
		<div class="div1"></div>
		<div class="div2"></div>
	</div>