html 靠左

HTML5是最新的网页设计标准，它提供了许多新的元素和属性，使得网页设计更加灵活和强大，HTML5的布局方式是非常重要的一部分，它决定了网页元素的排列方式，在HTML5中，我们可以使用CSS来控制元素的布局，包括靠左和靠右。

在HTML5中，有两种主要的布局方式：块级布局和内联布局。

1、块级布局：块级元素会独占一行，其宽度默认为100%，可以设置宽度、高度、内外边距等属性，div、p、h1-h6、ul、ol、li等元素都是块级元素。

2、内联布局：内联元素不会独占一行，它会和其他内联元素在同一行显示，其宽度由内容决定，不能设置宽度和高度，但可以设置内外边距，span、a、em、strong等元素都是内联元素。

在HTML5中，我们可以使用CSS的float属性来控制元素的浮动方式，从而实现靠左和靠右的布局，float属性有四个值：none、left、right和inherit。

1、none：元素不浮动，默认值。

2、left：元素向左浮动，直到它的外边缘碰到包含块或另一个浮动框的边缘。

3、right：元素向右浮动，直到它的外边缘碰到包含块或另一个浮动框的边缘。

4、inherit：继承父元素的float属性值。

1、靠左：我们可以将元素的float属性设置为left，这样元素就会向左浮动，直到它的外边缘碰到包含块或另一个浮动框的边缘，我们可以这样设置一个div元素：

<div style="float:left;">这是一个靠左的元素</div>

2、靠右：我们可以将元素的float属性设置为right，这样元素就会向右浮动，直到它的外边缘碰到包含块或另一个浮动框的边缘，我们可以这样设置一个div元素：

<div style="float:right;">这是一个靠右的元素</div>

在使用float属性时，我们需要注意以下几点：

1、如果有多个元素都设置了float属性，那么这些元素会按照它们在HTML文档中出现的顺序依次排列，后面的元素会挤到前面的元素的右边。

2、如果一个元素设置了float属性，那么它的内容会尽量靠近这个元素的左侧或右侧，如果这个元素没有足够的空间，那么它的内容可能会溢出到包含块中。

3、如果一个元素设置了float属性，那么它会自动脱离正常的文档流，也就是说，它不会影响到其他元素的布局，它的父元素的高度可能会塌陷，因为父元素无法正确计算子元素的高度，为了解决这个问题，我们可以清除浮动。

我们可以使用clear属性来清除浮动，clear属性有四个值：none、left、right和both。

1、none：不允许左边或右边有浮动对象。

2、left：不允许左边有浮动对象。

3、right：不允许右边有浮动对象。

4、both：不允许左边和右边有浮动对象。

我们可以这样清除一个div元素的浮动：

<div style="clear:both;"></div>