Обычный рабочий процесс браузера - отображать элементы слева направо, каждый рядом с другим (если встроенные элементы) ... когда строка заканчивается из-за размера веб-страницы, браузер запускается снова для отображения элементов слева направо, но на следующей строке.
Директива float для элемента заставляет браузер отображать элемент вне обычного рабочего процесса в левой верхней или верхней правой части веб-страницы.
Директива display inline заставляет элементы блока отображаться встроенными, поэтому браузер управляет этими элементами, как описано выше!
ОТВЕТИТЬ НА ВАШ ВОПРОС: Нет! Как я уже писал: float: left заставляет любой элемент (блок или не блок), помещенный в любую строку веб-страницы, плавать в левой части веб-страницы ... даже если установлено выравнивание текста направо"!
Если выравнивание текста установлено по левому краю, применяя float: left, что ничего не происходит ... вместо этого даже в этом случае элемент вынужден выходить из обычного рабочего процесса браузера, фактически, обычно оставшееся поле равно сброшена!
display: inline не влияет на встроенные элементы ... если для выравнивания текста (контейнера элементов) установлено значение "right", display: inline не перемещает его слева (обратите внимание, Я имею в виду встроенные элементы) ... потому что "display: inline" говорит браузеру только об отображении элемента в той же строке обычного рабочего процесса ... так что, если элемент является встроенным (например, ссылка элемент), это свойство не меняет своего поведения!
Итак, display: inline влияет только на элементы block! Но даже в этом случае он не перемещается слева от элемента блока, но заставляет элемент отображаться только в одной строке других встроенных элементов!
О ВАШЕМ ПРИМЕРЕ: Div (s) - это блочные элементы, обычный рабочий процесс не является встроенным ... поэтому браузер, по умолчанию, показывает их один ниже другого , как в этом примере:
<div class="purple" style="float:left">Link one</div>
<div class="purple">Link two</div>
<div class="purple">Link three</div>
<div class="purple">Link four</div>
даже если вы примените float: left к первому div, швы, что ничего не происходит, только почему он уже находится в верхнем левом углу ... куда он должен пойти иначе !!! ???
Второй пример ...
<div class="red" style="float:left">Link one</div>
<div class="red" style="float:left">Link two</div>
<div class="red" style="float:left">Link three</div>
<div class="red" style="float:left">Link four</div>
Когда вы применяете float: влево к смежным элементам, заставьте браузер отображать их вне обычного рабочего процесса (К сожалению, по умолчанию элементы блока отображаются один под другим !), плавающие div (ы) на левой стороне ... в этом случае один рядом друг с другом. Обратите внимание, что, к сожалению, поля сбрасываются ... потому что div (s) находятся не в обычной строке браузера, а только с плавающей точкой слева ... опять же, вне обычного рабочего процесса!
На самом деле следующий пример подтверждает то, что мне грустно в теории ... display: inline заставляет браузер отображать элементы блока (div) на одной строке с учетом их поля по умолчанию и отступов :
<div class="brown" style="display:inline">Link one</div>
<div class="brown" style="display:inline">Link two</div>
<div class="brown" style="display:inline">Link three</div>
Но дисплей : inline не заставляет элементы плавать слева, а только управляется как встроенные элементы , чтобы прояснить эту концепцию, рассмотрим большую разницу между двумя примерами ниже!
ПЕРВОЕ:
<div style="width:800px; text-align: right;">
<div class="brown" style="display:inline">Link one</div>
<div class="brown" style="display:inline">Link two</div>
<div class="brown" style="display:inline">Link three</div>
<div class="brown" style="display:inline">Link four</div>
</div>
ВТОРОЙ:
<div style="width:800px; text-align: right;">
<div class="brown" style="float:left">Link one</div>
<div class="brown" style="float:left">Link two</div>
<div class="brown" style="float:left">Link three</div>
<div class="brown" style="float:left">Link four</div>
</div>
О ШИРЕ: отображение: встроенное на элементе блока без фиксированной ширины, оно заставляет ширину свернуться до минимального значения (ширина содержимого + отступ), потому что это нормальное поведение встроенного элемента.
Элемент div по умолчанию имеет ширину 100% ... поэтому, когда вы применяете float: left, ширина по-прежнему установлена на 100%, но плавающий элемент слева заставляет браузер управлять и отображать его ширина необычным способом! В этом случае нет общего правила, каждый элемент имеет свое поведение!