【CSS】7-css浮动

最新推荐文章于 2024-07-25 09:25:29 发布

JeffHan^_^

最新推荐文章于 2024-07-25 09:25:29 发布

阅读量243

点赞数

分类专栏： CSS教程文章标签： css css3 html

本文链接：https://blog.csdn.net/Jeffhan_java/article/details/125993246

版权

CSS教程专栏收录该内容

12 篇文章 0 订阅

订阅专栏

7-css浮动

浮动：
    float: left左浮动 right右浮动 none无浮动
    
    浮动可以理解为将元素在浏览器上浮起来。

1.通过两种方式使款元素排列在一行

1. 设置元素属性display
    .div-style-1 {
    	width: 300px;
    	height: 300px;
    	border: solid 2px red;
    	background-color: green;
    	
    	/* 通过改变元素属性使得多个div排列在一行 */
    	display: inline-block;
    }

2.使用浮动使多个div排列在一行
    .div-style-2 {
    	width: 300px;
    	height: 300px;
    	border: solid 2px red;
    	background-color: green;
    	
    	/* 使用浮动将多个div排列在一行 */
    	float: left;
    	
    	/* 依旧可以设置元素外边距 */
    	margin: 0 20px;
    }

2.浮动样式

1.可以设置两个左浮动，两个右浮动
	#div9,#div10 {
		float: left;
	}
	#div11,#div12 {
		float: right;
	}

3.设置浮动可能会导致父级元素坍塌

1.解决方式一:直接设置父级元素的高度
    #father-div-2 {
    	height: 304px;
    } 
    
2.解决方式二：父级元素设置超出隐藏
	#father-div-2 {
		overflow: hidden;
	} 
	
3.解决方式三：增加一个不浮动的div
    <div style="float: none;clear: both;"></div>
    
    //clear:both 表示该元素左右都不能出现浮动的元素
    
4.解决方式四：使用伪类追加清除浮动的内容(推荐)
    .clear-float::after {
        content:"";
        display:block;
        float:none;
        clear:both;
    }