html中li能做浮动吗,css浮动规则

css浮动

在说明浮动规则之前，先讲一下为什么需要浮动吧。

HTML中的标签可分为块状元素和行内元素。块状元素在页面显示中独占一行，可以定义宽高，就像这样：

但行内元素可以并排显示，

那么如果想要实现块状元素像内联元素一样可以并排显示的话，就需要给元素设置浮动属性。

浮动可以取消标准流模式，让块状元素可以并排显示。

浮动在css中的写法：

选择器{float：属性值；}

浮动的属性值

left：向左浮动；

right：向右浮动；

none：取消浮动；

inherit：继承父级元素的浮动属性；

添加浮动后的效果

浮动属性的规则

规则一：浮动元素的左右外边界不能超出包含块的左右内边界。

规则二：浮动元素不会重叠。

规则三：浮动的顺序和HTML中标签书写的顺序有关。

规则四：元素添加浮动后，不再占有标准文档流的位置，后面的元素会向上移动补位。如图：

规则五：如果多个元素需要并排显示，那么这些元素都需要设置浮动，否则会出现下面这种状况，如图：

1没有设置浮动，2设置向右浮动，可见浮动后没有在一排显示。

规则六：浮动对象会向左或向右浮动直到遇到边界，padding，margin，border或另一个元素位置。

规则七:容器宽度不够时，添加浮动的元素会转到下一行，如图：

规则八：添加浮动属性后，margin：0 auto；就不再起作用。

附：

利用float属性可以做一个简单的导航：

li{list-style: none;}

a{text-decoration: none;}

.nav {

width: 1080px;

}

.nav li{

width: 137px;

height: 50px;

float: left;

font-size: 16px;

line-height:52px ;

text-align: center;

background: #6ba9ef;

}

.nav li a{

color: #134680;

效果图：

Nmeo

发布了1 篇原创文章 · 获赞 0 · 访问量 13

私信

关注

标签：浮动,float,元素,li,规则,css,属性

来源： https://blog.csdn.net/qq_43627280/article/details/104460142